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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如您所见，我有.sidebar（左），.content（右）。

问题在于我希望.content上的水平滚动条始终可见，即使body未垂直滚动到底部也是如此。

正如您在图片上看到的那样，当位于body - 滚动条的顶部时，.content上没有可见的滚动条

当前结果

预期结果

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

这样的事情：

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 4

请检查一下。

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

您可以通过设置容器的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 6

尝试将此CSS添加到正文中

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

.element_with_minWidth {
   min-width: 1000px;
}

Answer 7

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

默认情况下，水平滚动条仅在用户将鼠标悬停在容器或滚动元素上时出现。如果您想让用户知道还有更多的项目可以滑动/或轻扫，这可能没用。

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

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

这是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 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> 元素上的滚动条”：当您滚动网站时，您并不关心滚动条附加到哪个元素。您只关心它就在那里，可以访问和使用。