Eu preciso fazer o principal do meu site que tenha980px width e500px height (class = "main") será corrigido apenas quando o mouse estiver sobre uma div de rolagem e tiver umheight of 1500px e umwidth of 100% (class = "container-scroll"), que está dentro de outra div comheight of 500px. (class = "container")

Muito confuso, certo?

Eu fiz um violino, estou quase lá, o problema é que, se eu configurar o main para fixo, ele rolará com a página, não apenas dentro da div

Este é o meu violino:https://jsfiddle.net/8oj0sge4/1/embedded/result/

HTML:

<div id="wrapper">
    <div class="container">
        <div class="container-scroll">
            <div class="main">

            </div>
        </div>
    </div>
</div>

CSS:

    #wrapper {
        width: 100%;
        height: 1500px;
        border: 1px solid red;
        padding-top: 380px;
    }
    #wrapper .container {
        border: 1px solid green;
        width: 100%;
        height: 500px;
        overflow: scroll;
    }
    #wrapper .container-scroll {
        height: 1500px;
        width: 100%;
        border: 1px solid yellow;
    }
    #wrapper .main {
        width: 980px;
        height: 500px;
        background: black;
        overflow: scroll;
        /*position: fixed;*/
    }