javascript - 制作一个不滚动 body 其余部分的可滚动div

标签 javascript html css

应该很简单,但我做不出来。

我的网页上有两个 Pane 。我希望两者都可以独立滚动:

<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 .请注意,当您滚动到黑色侧边栏的底部并继续滚动时,正文如何开始滚动?这就是我想避免的。有没有一种简单的方法可以实现这一目标?

最佳答案

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

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

}

希望对您有所帮助!

关于javascript - 制作一个不滚动 body 其余部分的可滚动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29092898/

相关文章:

javascript - 倒计时脚本,无法正确显示或倒计时

html - 内部 div 需要位于其他内容之上的右浮动 div

javascript - 相对于其底部定位 div

javascript - 我如何以另一个函数的路径运行Audio.play,就像它们在同一个函数中一样快?

html - 为什么包含字形时 svg 文件不显示正确的字体?

javascript - 使用另一个对象数组过滤 Javascript 对象数组

javascript - 是否可以在HTML5.canvas中绘制大量简单的几何图形?

html - Safari 不运行 css 显示 :none property

javascript - 在 threejs 中,setClearColor 的值为白色但是当我调用外部 html 文件时它呈现黑色?

javascript - 在 MOBILE ANGULAR UI 中,HTML 文本未以正确的方式从 JSON 呈现