Question

HTML

我有两个div一个父母另一个孩子。两者都有很多内容。因此，他们有滚动条。现在我们在这里观察到的是，当滚动到达子div的底部时，父内容开始滚动。很难说出来。所以我正在联系一个小提琴 -

我想要的是当我完成滚动孩子的时候。即滚动条已到达孩子的底部，那么我必须能够避免滚动父母。当鼠标在子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}

Answer 1

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

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

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

滚动子div不应该滚动父div

1 个答案: