时间戳

首页 > 解决方案 > CSS：删除滚动创建的填充

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

没有滚动：

在此处输入图像描述

使用滚动：

在此处输入图像描述

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

标签： htmlcss

解决方案

您可以应用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>

推荐阅读