滚动子div不应滚动父div [英] Scrolling of a child div should not scroll parent div

问题描述

HTML

我有两个div一个父项，另一个是子项。两者都有很多内容。因为他们有滚动条。现在我们在这里的观察是，当滚动已经到达子div的底部时，父内容开始滚动。这是很难说的话。所以我连接一个小提琴 -

I have 2 divs One parent and another its child. Both has lots of contents. And because of that they have scrollbars. Now the observation we all have here is that when scrolling has reached to the bottom of child div then the parent contents starts scrolling. It is difficult to put in words. So I am linking a fiddle -

http：// jsfiddle。 net / JDkjh /

我想要的是当我完成滚动的孩子。即滚动条已经达到了孩子的底部，那么我必须能够避免父母的滚动。当鼠标在子div和用户滚动时，在父内容滚动时不能有任何方案。

What I want is when I have finished scrolling child. i.e. scrollbars has reached to the bottom of child then I must be able to avoid scrolling of parents. When mouse is on child div and user scrolls then there must be no scenario when parent contents scrolls.

CSS解决方案必须很好。但我希望没有这样。所以如果有任何js或jquery修复，请让我知道。感谢。

CSS solution must be well and good. But I hope there is no such. So if there is any js or jquery fix please let me know. Thanks.

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}

推荐答案

然后你可以使用

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

这篇关于滚动子div不应滚动父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！