即使底部不在视图中，也使水平滚动条始终可见

Question

我将以一个片段开始这个问题，该片段几乎显示了我要完成的任务。

 .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 （右）。

问题是我想让.content上的水平滚动条始终可见，即使body没有垂直滚动到底部也是如此。

正如你在图片上看到的，当在body的顶部时 -scrollbar， .content上没有可见的滚动条

当前结果

预期结果

Answer 1

您可以通过设置容器的height来确保滚动条始终在页面底部可见。

 .wrapper { overflow: hidden; display: flex; }.sidebar { min-width: 200px; background: #333; color: #FFF; }.container { flex: 1; overflow-x: scroll; height: 92vh; }.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>

请注意，我将height设置为92vh 。 我不能使用100vh ，因为这会部分隐藏滚动条，这是由于自动添加到片段正文的边距

Answer 2

实现始终显示水平滚动条的最佳方法是这样的：

默认情况下，只有当用户将鼠标悬停在容器或滚动中的元素上时，水平滚动条才会出现。 如果您想让用户知道有更多项目可以滑动/或轻弹浏览，那么这可能是无用的。

在这里，我得到了一个类别列表，它们是列表项或只是链接。 我希望它们在桌面和移动设备中沿水平方向显示，用户可以轻弹浏览。 它也可以用于图像或卡片。 这是很好的用户体验，比在移动端堆叠更好。

始终显示水平滚动条，以便用户知道有更多内容可以水平滚动。

这是 html：

// Note I added z-index in case you can't reach the link due to another navbar on top. You can play with z-index if you need to. 
<div class="cool-shadow" style="z-index: 5;">
  <div class="scrollable-nav">
    <div class="container">
      <div class="some-class">
        <a href="#" class="navbar-item">Sports</a>
        <a href="#" class="navbar-item">News</a>
        <a href="#" class="navbar-item">Science</a>
        <a href="#" class="navbar-item">Programming</a>
        <a href="#" class="navbar-item">Bla Blah</a>
      </div>
    </div>
  </div>
</div>

这是使它们可滚动的 css：

.scrollable-nav {
  // First four are essential.
  display: block;
  width: 100%; 
  overflow-x: scroll;
  white-space: nowrap;
  // You can change these below if you'd like
  height: auto;
  padding: 10px;
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #2f3142;
  z-index: 5;
  
}

// Make sure the navbar-items are inline block.
.scrollable-nav .navbar-item {
  display: inline-block;
}

这是确保滚动条始终可见的 css。 始终显示 x 滚动条，让用户知道要水平轻拂项目，尤其是当它们在移动设备上或链接溢出时，无论屏幕大小如何。

.scrollable-nav::-webkit-scrollbar:horizontal {
  height: 11px;
}

.scrollable-nav::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid green;
  /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}
// This one is important.
.scrollable-nav::-webkit-scrollbar {
  -webkit-appearance: none;
}

/* 
.scrollable-nav::-webkit-scrollbar:horizontal {
  width: 11px; // This one is optional in case you wanna do this vertically too
} */

Answer 3

尝试将此 css 添加到正文中

body, html {
  height: calc(100vh);
  overflow-x: scroll;
}

.element_with_minWidth {
   min-width: 1000px;
}

Answer 4

 .wrapper { overflow: hidden; display: flex; }.sidebar { min-width: 200px; background: #333; color: #FFF; }.container { flex: 1; overflow-x: scroll; height:95vh; }.content { 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>

Answer 5

这可行，但也可能为您的页面带来其他问题。 由于使用了绝对位置。

 .wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }.sidebar { position: absolute; top:0; left: 0; bottom:0; width: 200px; background: #333; color: #FFF; }.container { position: absolute; top: 0; left: 200px; right:0; bottom:0; 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>

Answer 6

像这样：

 body { margin: 0; }.wrapper { overflow: hidden; display: flex; }.sidebar { min-width: 200px; background: #333; color: #FFF; }.container { flex: 1; overflow-y: hidden; height: 100vh; }.long { width: 2000px; }.header { background: #666; }.content-wrapper { height: 100vh; overflow: auto; }

 <div class="wrapper"> <div class="sidebar"> Sidebar </div> <div class="container"> <div class="content-wrapper"> <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> </div>

Answer 7

请检查这个。

 .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; }.content{height:93vh;}

 <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>

Answer 8

这是你想要的吗？

 body { margin: 0; }.wrapper { height: 100vh; width: 100vw; display: flex; }.sidebar { flex: 1 0 200px; background: #333; color: #FFF; }.container { flex: 1 1 auto; overflow: auto; }.long { width: 2000px; }.header { background: #666; position: sticky; top: 0; }

 <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>

如果您希望标题在垂直滚动时上升，请删除

position: sticky;
top: 0;

...来自它的 CSS。

参考： “我想要<body>元素上的滚动条” ：当您滚动网站时，您不关心滚动条附加到哪个元素。 您所关心的只是它在那里，它可以访问和使用。