Webkit浏览器中的自定义滚动条

Question

我有一个div为3 div，每个div都独立滚动。

<div class="divWrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-x: auto;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 0;
}

滚动时我想隐藏滚动条。在Windows上，所有浏览器都不显示滚动条，但在MAC滚动条上可见。有没有办法滚动滚动条而不显示滚动条？

Answer 1

Webkit浏览器中的自定义滚动条

<小时/> 所以 CSS 是

::-webkit-scrollbar {
    display: none;
}

有关此主题的更多信息：https://css-tricks.com/custom-scrollbars-in-webkit/

Answer 2

使用下面的 CSS 代码

.row-cards  {
    display: flex;   
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
   

  }

此 div 类名称为 .row-cards，因此水平滚动条功能将处于活动状态，但滚动条将被隐藏，从而获得平滑的外观

Answer 3

应该是oveyflow-x: hidden而不是overflow-x: auto

如何隐藏水平滚动条但仍能滚动

3 个答案:

Webkit浏览器中的自定义滚动条