Запретить родительскую прокрутку в дочернем div

когда я прокручиваю до нижней части ребенка div, the body элемент прокрутки.

как я могу предотвратить это? Я хочу только body для прокрутки, когда курсор находится над ней.

пример: JsFiddle

7
css jquery scroll

5 ответов

добавив, конечно, javascript!

скрипка

$( '.area' ).on( 'mousewheel', function ( e ) {
    var event = e.originalEvent,
        d = event.wheelDelta || -event.detail;

    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});
13

используйте этот плагин http://mohammadyounes.github.io/jquery-scrollLock/

Он полностью решает проблему блокировки прокрутки колесика мыши внутри данного контейнера, предотвращая его распространение на родительский элемент.

Он не изменяет скорость прокрутки колеса, пользовательский опыт не будет затронут. и вы получаете такое же поведение независимо от скорости вертикальной прокрутки колесика мыши OS (в Windows его можно установить на один экран или одну строку до 100 строк per notch).

демо:http://mohammadyounes.github.io/jquery-scrollLock/example/

источник:https://github.com/MohammadYounes/jquery-scrollLock

2

Если вы не вкладываете свои элементы в другие элементы прокрутки (в большинстве случаев), вы можете использовать этот простой высокопроизводительный подход: 

$(document).ready(function () {
  $('.self-scroll').on('mouseover', function () {
    document.body.style.overflow='hidden';
  });
  $('.self-scroll').on('mouseout', function () {
    document.body.style.overflow='auto';
  });
});

теперь, если вы применяете self-scroll class к любому элементу, он не будет прокручивать тело.

2

принятый ответ кажется устаревшим. The "колесо" событие является нестандартной функцией. В "колеса" событие теперь кажется стандартным. Также wheelDelta не определен в большинстве браузеров. Изменить на-событие.дельтай, кажется, делает трюк. Работает в IE 10, Chrome и Firefox

$(".scroll-div").on("wheel", function ( e ) {
            var event = e.originalEvent,
                d = -event.deltaY || -event.detail ;

            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
    });
2

Использовать

$(document).ready(function() {


// to prevent scrolling of parent div when modal is open
var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
        var overlay = $body.children(".ui-widget-overlay").first();
        // Check if the overlay is visible and restore the previous scroll state
        if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

});

он будет блокировать прокрутку в Родительском окне. Работал на меня

0