我将从一个代码片段开始,展示我所尝试实现的大致内容。
.wrapper {
overflow: hidden;
display: flex;
}
.sidebar {
min-width: 200px;
background: #333;
color: #FFF;
}
.container {
flex: 1;
overflow-x: scroll;
}
.long {
width: 2000px;
}
.header {
background: #666;
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="container">
<div class="header long">
Header
</div>
<div class="content">
<div class="long">
I am long
</div>
Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>Long text<br/>
</div>
</div>
</div>
如您所见,我有一个左边的.sidebar
和右边的.content
.
问题在于,我希望在body
没有垂直滚动到底部时,.content
上的水平滚动条始终可见。
正如图片所示,在body
-scrollbar顶部时,.content
上没有可见的滚动条。
Window.scrollTo()
来实现滚动。 - ScintillatingSpider