Мне нужно сделать основной мой сайт, который имеет980px width а также500px height (class = "main") исправляется только тогда, когда мышь находится над прокручиваемым элементом и имеетheight of 1500px иwidth of 100% (class = "container-scroll"), то есть внутри другого div сheight of 500px. (Класс = "контейнер")

Довольно сбитый с толку, верно?

Я сделал скрипку, я почти на месте, проблема в том, что если я установлю основной на фиксированный, он будет прокручивать страницу, а не только внутри div

Это моя скрипка: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;*/
    }