如何在滚动 DIV 元素时防止页面滚动？

我已经审查并测试了防止主体在 div 内滚动的各种功能，并组合了一个应该有效的功能。

$('.scrollable').mouseenter(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return false;
    });
    $(this).bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});
$('.scrollable').mouseleave(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});

• 这将停止所有滚动，因为我希望在容器内仍然可以滚动
• 这也不会在鼠标离开时停用

有什么想法或更好的方法吗？

更新2：我的解决方案是基于完全禁用浏览器的本机滚动（当光标位于 DIV 内部时），然后使用 JavaScript 手动滚动 DIV（通过设置其.scrollTop财产）。另一种更好的方法是仅选择性地禁用浏览器的滚动，以防止页面滚动，但不阻止 DIV 滚动。查看下面 Rudie 的答案，它演示了这个解决方案。

干得好：

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

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

现场演示： https://jsbin.com/howojuq/edit?js,输出

因此，您手动设置滚动位置，然后阻止默认行为（即滚动 DIV 或整个网页）。

更新1：正如 Chris 在下面的评论中指出的，在较新版本的 jQuery 中，增量信息嵌套在.originalEvent对象，即 jQuery 不再在其自定义事件对象中公开它，我们必须从本机事件对象中检索它。