Necesito hacer el principal de mi sitio que tiene980px width y500px height (class = "main") se reparará solo cuando el mouse esté sobre un div de desplazamiento y tenga unheight of 1500px y unwidth of 100% (class = "container-scroll"), que está dentro de otro div conheight of 500px. (clase = "contenedor")

Bastante confundido, ¿verdad?

Hice un violín, casi estoy allí, el problema es que si configuro el principal como fijo, se desplazará con la página, no solo dentro del div

Este es mi violín: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;*/
    }