在这个线程中给出的所有解决方案都没有提到一个现有的和本地的方法来解决这个问题，而不需要重新排序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行为不再落后于功能标志。

不要使用overflow: hidden;在身体。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用overflow: auto;:

HTML结构

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

样式

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

在这里玩演示。

我知道这是一个相当老的问题，但由于这是谷歌的顶级结果之一……我不得不以某种方式取消滚动冒泡没有jQuery和这段代码为我工作:

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);
}

这是一个简单的JavaScript版本:

function scroll(e) {
  var delta = (e.type === "mousewheel") ? e.wheelDelta : e.detail * -40;
  if (delta < 0 && (this.scrollHeight - this.offsetHeight - this.scrollTop) <= 0) {
    this.scrollTop = this.scrollHeight;
    e.preventDefault();
  } else if (delta > 0 && delta > this.scrollTop) {
    this.scrollTop = 0;
    e.preventDefault();
  }
}
document.querySelectorAll(".scroller").addEventListener("mousewheel", scroll);
document.querySelectorAll(".scroller").addEventListener("DOMMouseScroll", scroll);

如果有人还在寻找一个解决方案，下面的插件做的工作http://mohammadyounes.github.io/jquery-scrollLock/

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

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

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

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

jQuery插件:

$('.child').dontScrollParent();

$.fn.dontScrollParent = function()
{
    this.bind('mousewheel DOMMouseScroll',function(e)
    {
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        if (delta > 0 && $(this).scrollTop() <= 0)
            return false;
        if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
            return false;

        return true;
    });
}