CSS：删除滚动创建的填充

Question

CSS：删除滚动创建的填充

我正在尝试构建一个类似于 Apple Mail 的 UI，左侧栏有水平的电子邮件列表，您可以滚动浏览。问题是，当我添加滚动时，它会创建一个额外的填充，而不是呈现在内容之上。

<!doctype html>
<html style="height: 100%;">
<head>
<style>
.scrollable-list-item {
  padding: 1rem;
  border-bottom: 1px solid #cdcdcd;
}
.scrollable-list-item-active {
  background-color: #0069d9;
  color: white;
}
</style>
</head>
<body style="height: 100%; width: 100%; margin: 0">
  <div style="height: 100%; width: 100%; display: flex;">
      <div style="width: 200px; height: 100%; overflow-x: scroll; background-color: #efefef;">
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item scrollable-list-item-active">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
      </div>
      <div>content</div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

没有滚动条：

带滚动条：

添加滚动而不在其周围添加空白区域的正确方法是什么？谢谢你！

Answer 1

Uts*_*tel 4

可以应用scrollbar-width: none到容器div上。

这将完全隐藏滚动条。您将能够滚动。

尽管浏览器对此属性的支持相当新。

你可以在这里读到它

如果没有自定义库，则无法实现所需的行为

<!doctype html>
<html style="height: 100%;">
<head>
<style>
 .container {
   scrollbar-width: none;
  -ms-overflow-style: none;
  }
.scrollable-list-item {
  padding: 1rem;
  border-bottom: 1px solid #cdcdcd;
  
}
.scrollable-list-item-active {
  background-color: #0069d9;
  color: white;
}
</style>
</head>
<body style="height: 100%; width: 100%; margin: 0">
  <div style="height: 100%; width: 100%; display: flex;">
      <div class="container"style="width: 200px; height: 100%; overflow-x: scroll; background-color: #efefef;">
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item scrollable-list-item-active">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
          <div class="scrollable-list-item">scrollable list item</div>
      </div>
      <div>content</div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，9 月前
查看次数：	10836 次
最近记录：	2 年，3 月前