制作一个可滚动的div，它不会滚动身体的其余部分

Should be simple but I can't work it out.

应该很简单，但我无法解决。

I have two panes on my webpage. I want both to be independently scrollable:

我的网页上有两个窗格。我希望两者都可以独立滚动：

<body>
   <div id="sidebar"> ... lots of content ... </div>
   <div id="container"> ... lots of content ... </div>
</body>

#sidebar{
    width:200px;
    position:fixed;
    overflow:scroll;
    background-color:black;
    color:white;
    top:0;
    left:0;
    height:100%;
}

Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?

这是一个JSFiddle。注意当你滚动到黑色侧边栏的底部，并继续滚动时，身体开始滚动？这就是我想要避免的。有没有一种简单的方法来实现这一目标？

4 个解决方案

#1

Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.

请尝试关注更新的CSS。在这里我设置了200px的高度，之后它会为#sidebar div添加滚动条。

#sidebar{
    width:200px;
    position:fixed;
    overflow:auto;
    background-color:black;
    color:white;
    top:0;
    left:0;
    height:200px;

}

Hope it may help.!!

希望它可能有所帮助。!!

4 个解决方案

#1

更多相关文章

随机推荐