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

Question

我有一个带有 3 个 div 的 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 not overflow-x: auto