如何防止在子项中滚动其父项[重复]答案

【问题标题】：How to prevent scrolling in a child from scrolling its parent [duplicate]如何防止在子项中滚动其父项[重复]
【发布时间】：2014-05-30 06:25:39
【问题描述】：

我正在制作一个带有可滚动内容的弹出框（类似于 Facebook 的通知弹出框）。

当前，当弹出框具有焦点并且用户滚动其内容滚动并且一切正常时，直到到达底部并且父级开始滚动（see example of problem on CodePen）。

我试图阻止父级在到达子级底部时滚动，并且希望尽可能使用仅使用 CSS！

【问题讨论】：

我怀疑它是否可能，除非您将背景页面高度设置为窗口高度，这样它就不会滚动
这可能对stackoverflow.com/questions/19706954/…有帮助
谢谢大家。 @leo 非常接近，但我仍然很好奇在纯 CSS 中是否有可能避免在 js 中添加 noscroll。

标签： css html

【解决方案1】：

如果您在body 中设置overflow: hidden，这将阻止它滚动。当然，当您关闭弹出窗口时，您会想要删除此属性。

【讨论】：

这是一个不错的解决方案 Sam，但我希望用户在悬停时仍然能够滚动背景内容（Facebook 和 Pinterest 的通知弹出框都是这种方式）。也就是说overflow: hidden 可以在悬停时添加/删除。
这样的东西会很完美。

【解决方案2】：

补充山姆的答案。即时告诉它你想要什么——例如；

    <div class="hover-content" 
         onmouseover="document.body.style.overflow='hidden';"           
         onmouseout="document.body.style.overflow='auto';">
blah yay I'm fixed
</div>

希望对你有帮助，干杯

【讨论】：

克里斯，我真的很喜欢这个实现。我仍然很好奇是否可以仅使用 CSS，但如果不是，我认为这将是我选择的解决方案。
我不相信滚动事件的冒泡是如何处理的......但我以前错了。