即使底部不在视野范围内,也可以使水平滚动条始终可见

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

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

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

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

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

这是 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 2

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 3

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