Question

当我滚动到孩子div的底部时，body元素开始滚动。

我该怎样防止这种情况？我只希望body在光标悬停时滚动。

Answer 1

当然添加一些javascript！

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

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

Answer 2

接受的答案似乎过时了。 "mousewheel"事件是非标准功能。 “wheel”事件现在似乎是标准。在大多数浏览器中也没有定义wheelDelta。改为-event.deltaY似乎可以解决问题。适用于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();
    });

Answer 3

使用此插件http://mohammadyounes.github.io/jquery-scrollLock/

它完全解决了在给定容器内锁定鼠标滚轮滚动的问题，防止其传播到父元素。

它不会改变滚轮滚动速度，不会影响用户体验。无论操作系统鼠标滚轮垂直滚动速度如何，您都可以获得相同的行为（在Windows上，它可以设置为一个屏幕，也可以设置为每行最多100行的一行）。

演示：http://mohammadyounes.github.io/jquery-scrollLock/example/

来源：https://github.com/MohammadYounes/jquery-scrollLock

Answer 4

如果您没有将元素嵌套在其他滚动元素（大多数情况下）中，您可以采用这种简单的高性能方法：

$(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类应用于任何元素，它将不会滚动正文。

Answer 5

使用此

$(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() });
    }
};

}）;

它会锁定父窗口的滚动。为我工作

在子div中阻止父滚动

5 个答案: