Question

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

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

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

Answer 1

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

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

}

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

Answer 2

body { 
overflow-y : hidden 
}

如果您不想滚动身体，

可以帮助您。

Answer 3

如果我正确理解你的问题，这是有效的。只是制作溢出：鼠标悬停在侧边栏上时隐藏。

 #sidebar:hover + #container{
    overflow-y: hidden;
    height: some_value; // your window height
 }

Answer 4

你说得对。在Chrome中它会发生。也许有些jQuery？

$("#sidebar").focus(function(){
    $('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
    $('body').css("overflowY","scroll"); 
});

将tabindex="-1"添加到侧边栏以使其正常工作

Actually Working

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

4 个答案: