在子div中防止父滚动
当我滚动到子div的底部时， body元素开始滚动。
我怎么能阻止这个？ 我只希望当光标在它上面时滚动body 。
示例： JsFiddle
通过添加一些JavaScript当然！
小提琴
$( '.area' ).on( 'mousewheel', function ( e ) { var event = e.originalEvent, d = event.wheelDelta || -event.detail; this.scrollTop += ( d < 0 ? 1 : -1 ) * 30; e.preventDefault(); });
使用此插件http://mohammadyounes.github.io/jquery-scrollLock/
它完全解决了在给定容器内锁定鼠标滚轮滚动的问题，防止其传播到父元素。
它不会改变滚轮滚动速度，不会影响用户体验。 无论操作系统鼠标滚轮垂直滚动速度如何，您都可以获得相同的行为（在Windows上，它可以设置为一个屏幕，也可以设置为每行最多100行的一行）。
演示： http ： //mohammadyounes.github.io/jquery-scrollLock/example/
资料来源： https ： //github.com/MohammadYounes/jquery-scrollLock
如果您没有将元素嵌套在其他滚动元素（大多数情况下）中，您可以采用这种简单的高性能方法：
$(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类应用于任何元素，它将不会滚动正文。
接受的答案似乎已经过时了。 “鼠标滚轮”事件是非标准function。 “ 轮子 ”事件似乎是现在的标准。 此外，大多数浏览器中都没有定义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(); });
用这个
$(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() }); } };
}）;
它将锁定父窗口上的滚动。 为我工作