子 div 的滚动不应滚动父 div答案

【问题标题】：Scrolling of a child div should not scroll parent div子 div 的滚动不应滚动父 div
【发布时间】：2013-10-31 12:47:45
【问题描述】：

HTML

我有 2 个 div 一个父母和另一个孩子。两者都有很多内容。正因为如此，他们有滚动条。现在我们在这里的观察结果是，当滚动到达子 div 的底部时，父内容开始滚动。很难用言语表达。所以我正在链接一个小提琴 -

http://jsfiddle.net/JDkjh/

我想要的是当我完成滚动孩子时。即滚动条已到达孩子的底部，那么我必须能够避免滚动父母。当鼠标在子div上并且用户滚动时，父内容滚动时一定没有场景。

CSS 解决方案必须很好。但我希望没有这样的。因此，如果有任何 js 或 jquery 修复，请告诉我。谢谢。

CSS 代码：

.first {width:300px; height:300px; border:1px solid #000; overflow:auto; position:fixed; text-align:center}
.second {width:100px; height:100%; position:absolute; top:0; right:0; border:1px solid blue; text-align:center; overflow:auto}

【问题讨论】：

我认为这可能会对您有所帮助 jsfiddle.net/eXQf3/371 来自 answer
成功了。非常感谢。

标签： jquery html css scroll scrollbar

【解决方案1】：

对于纯 CSS2 解决方案，使子级成为父级的兄弟，以防止滚动事件冒泡到父级，并确保主浏览器窗口不滚动。

然后您可以使用this answer 将您的小提琴变成this fiddle example：

<div id="wrapper">
    <div class="first">abc
    </div>
    <div class="second">xyz
    </div>
</div>

【讨论】：