mouseweel事件的简单解决方案:

$('.element').bind('mousewheel', function(e, d) {
    console.log(this.scrollTop,this.scrollHeight,this.offsetHeight,d);
    if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
        || (this.scrollTop === 0 && d > 0)) {
        e.preventDefault();
    }
});

你可以这样尝试:

$('#element').on('shown', function(){ 
   $('body').css('overflow-y', 'hidden');
   $('body').css('margin-left', '-17px');
});

$('#element').on('hide', function(){ 
   $('body').css('overflow-y', 'scroll');
   $('body').css('margin-left', '0px');
});

在这个线程中给出的所有解决方案都没有提到一个现有的和本地的方法来解决这个问题，而不需要重新排序DOM和/或使用事件阻止技巧。但是有一个很好的理由:这种方法是专有的-并且只能在MS web平台上使用。引用MSDN:

-ms-scroll- chainingproperty -指定当用户在操作过程中达到滚动限制时发生的滚动行为。属性值: chained -初始值。当用户在操作期间达到滚动限制时，最近的可滚动父元素开始滚动。没有反弹效果显示。 none -当用户在操作过程中碰到滚动限制时，会显示一个反弹效果。

当然，此属性仅在IE10+/Edge上支持。不过，这里有一句很有说服力的话:

为了让您了解防止滚动链接的流行程度， 根据我的快速http档案搜索“-ms-scroll-chaining:无” 在前300K页的0.4%中使用，尽管在 功能，只支持IE/Edge。

现在有好消息了，各位!从Chrome 63开始，我们终于有了针对基于blink的平台的原生疗法——这就是Chrome(显然)和Android WebView(很快)。

引用介绍文章:

The overscroll-behavior property is a new CSS feature that controls the behavior of what happens when you over-scroll a container (including the page itself). You can use it to cancel scroll chaining, disable/customize the pull-to-refresh action, disable rubberbanding effects on iOS (when Safari implements overscroll-behavior), and more.[...] The property takes three possible values: auto - Default. Scrolls that originate on the element may propagate to ancestor elements. contain - prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they've hit a scroll boundary. Note: using overscroll-behavior: contain on the html element prevents overscroll navigation actions. none - same as contain but it also prevents overscroll effects within the node itself (e.g. Android overscroll glow or iOS rubberbanding). [...] The best part is that using overscroll-behavior does not adversely affect page performance like the hacks mentioned in the intro!

下面是这个功能的实际情况。这里是相应的CSS模块文档。

更新:Firefox从59版开始加入这个俱乐部，MS Edge预计将在18版实现这个功能。这是相应的犬科用法。

更新2:现在(2022年10月)Safari正式加入了这个俱乐部:从16.0版本开始，overscroll行为不再落后于功能标志。

我能找到的最佳解决方案是监听窗口上的滚动事件，并在子div可见时将scrollTop设置为前一个scrollTop。

prevScrollPos = 0
$(window).scroll (ev) ->
    if $('#mydiv').is(':visible')
        document.body.scrollTop = prevScrollPos
    else
        prevScrollPos = document.body.scrollTop

如果触发大量滚动事件，子div的背景中会有闪烁，所以这可以进行调整，但它几乎不会被注意到，对于我的用例来说已经足够了。

我们可以简单地使用CSS。 为子滚动容器元素提供一个样式。

 style="overscroll-behavior: contain"

它不会触发父节点的滚动事件。

使用Brandon Aaron的Mousewheel插件，这是可能的。

这里是一个演示:http://jsbin.com/jivutakama/edit?html,js,output

$(function() {

  var toolbox = $('#toolbox'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;

  toolbox.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});