Исправлено div внутри прокрутки div

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

Довольно смутно, правильно?

Я сделал скрипку, я почти там, проблема в том, что если я настрою основной на фиксированный, он будет прокручиваться со страницей, а не только внутри 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;*/
    }

Ответ 1

Если я правильно понимаю это, вы хотите, чтобы главный div оставался на вершине родительского div?

Fiddle: https://jsfiddle.net/8oj0sge4/3/ (полный)

Сделанные изменения:

#wrapper .main: Добавлен position:absolute ( "fixed" для родителя)
#wrapper .container-scroll: добавлен position: relative (определяет, какой родительский элемент должен "исправить" )
Добавлен идентификатор основного div (для удобства)

Код JavaScript:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight; // Make sure we don't go outside the parent

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

Ответ 2

Для этого нет чистого CSS, но вы можете обойти его с помощью некоторого Javascript.

Одним из решений может быть отключить прокрутку во внутреннем div, если свитки были запущены на #wrapper, который демонстрируется на этом скрипте:

https://jsfiddle.net/qmjmthbz/

Вот код:

var wrapper = $('#wrapper');
var container = $('.container');
var timer;

// Listen to mouse scroll events
$('body').on('mousewheel', function(e) {
    var target = $(e.target);
    /* If the scroll is initiated from the #wrapper,
       disable scroll on the container and re-enable it
       100ms after the last scroll event */
    if (target[0] === wrapper[0]) {
        container.addClass('no-scroll');
        clearTimeout(timer);
        timer = setTimeout(function() {
            container.removeClass('no-scroll');
        }, 100);
    }
});

Примечание: бесполезно использовать jQuery для достижения этого, но я спешу, что на вокзале. Я получу лучший код, когда найду больше времени: -)

Ответ 3

В основном я думаю, что вы не можете сделать прокрутку div, потому что содержимое div не превышает высоту div. Чтобы div мог прокручиваться, контент должен фактически превышать высоту div.

Попробуйте дать div высоту let say 100px и вставьте количество текста, достаточно большое, чтобы превысить высоту 100 пикселей, тем самым сделав прокрутку div, а затем попытайтесь выполнить то, что вы хотите добиться.