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

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.

问题在于，我希望在body没有垂直滚动到底部时，.content上的水平滚动条始终可见。

正如图片所示，在body-scrollbar顶部时，.content上没有可见的滚动条。

当前结果

期望结果

- TryingToImprove

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
} */

- Elias Glyptis

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，因为由于在代码片段的body中自动添加的边距，这会部分隐藏滚动条。

- ScintillatingSpider

---

@TryingToImprove 我不确定是否可以仅使用纯html/css实现，你可能需要使用一些javascript来添加一个“假”滚动条。 - ScintillatingSpider

你可以使用滚动监听器和Window.scrollTo()来实现滚动。 - ScintillatingSpider

快到了：https://jsfiddle.net/1m1kegy3/2/ 我很想去掉固定的东西，但是不确定我们需要它。 - TryingToImprove

啊，我忘记检查了。我添加了一些代码，使得滚动条的“左侧”复制了侧边栏的宽度 :) https://jsfiddle.net/1m1kegy3/4/ - ScintillatingSpider

谢谢你的帮助！ :) 我找到了一个可行的方法；https://jsfiddle.net/1m1kegy3/6/你的解决方案也有效。 - TryingToImprove

Answer 3

这个方法可以运行，但是由于使用了绝对定位，可能会给你的页面带来其他问题。

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

- Dex

Answer 4

尝试将此CSS添加到body中。

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

.element_with_minWidth {
   min-width: 1000px;
}

- Filjumar Jumamoy

Answer 5

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

- Dhaarani

---

.long { width: 100%; } 如果值存在，则不要以px为单位给出宽度，视口宽度会自动启用水平滚动条。 - Dhaarani

不，只有当它扩展.container视口时，水平滚动条才需要出现。 - TryingToImprove

是的，目前您的代码运行良好。您需要什么？ - Dhaarani

不，水平滚动条只有在向下滚动到“body”的底部时才可见，应始终可见。 - TryingToImprove

给 .container 设置高度。现在检查我的答案。 - Dhaarani

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>

- Bogdan Efimenko

---

这很接近了，但是垂直滚动需要正常地滚动整个文档。目前.sidebar在滚动时没有改变。 - TryingToImprove

@TryingToImprove 在纯CSS上实现这个是不可能的。 你必须使用JS上的虚拟滚动条来实现你想要的效果。 如果你的侧边栏有更多内容，当你将鼠标悬停在侧边栏上时，你将会滚动它。 - Bogdan Efimenko

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>

- chander shekhar

---

谢谢您的回答，但这不可行，因为我想要在 body 上进行垂直滚动，而不是在 .content 上。 - TryingToImprove

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>元素上的滚动条”：当您滚动网站时，您不关心滚动条附加到哪个元素。您所关心的是它是否存在，是否可访问和可用。

- tao