CSS隐藏滚动条，但元素可滚动

Question

我有一个名为 items 的元素，元素内的内容比元素高度长，我想让它可滚动但隐藏滚动条，我该怎么做？

 <div class="left-side">
    <div
      class="items"
      style="display:block;width: 94%;margin: 0 auto;overflow: hidden;"
    >
    </div>
</div>

 .left-side {
    height: 878px;
    padding-top: 20px;
    width: 1470px;
}

我尝试将左侧类溢出设置为自动，但这并没有做任何事情。

原文由 user979331 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以隐藏它：

 html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

有关详细信息，请参阅： 隐藏滚动条，但仍可以滚动

原文由 Kiloumap Mrz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我将 SO 中的几个不同答案组合到以下代码片段中，我相信它应该适用于所有（如果不是大多数）现代浏览器。您所要做的就是将 CSS 类 .disable-scrollbars 添加到您希望应用它的元素上。

 .disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

如果你想使用 SCSS/SASS：

 .disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */

  &::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
}

原文由 danielricecodes 发布，翻译遵循 CC BY-SA 4.0 许可协议