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

Question

我有一个包含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上滚动条是可见的。 有没有一种方法可以在不显示滚动条的情况下进行滚动？

- User1979

---

CSS ::-webkit-scrollbar: display: noneCSS ::-webkit-scrollbar：display：none - undefined

@ZeusZdravkov 谢谢，这对我有用。 - User1979

请注意，这仅适用于Webkit浏览器和那些识别“-webkit-”前缀的浏览器。 - Shaggy

你最终解决了这个问题吗？ - mad_fox

这个回答解决了你的问题吗？隐藏滚动条，但仍能滚动。 - JohnnyHK

Answer 1

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

---

所以CSS是：

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

更多相关内容请参考：https://css-tricks.com/custom-scrollbars-in-webkit/

（注：该链接为关于WebKit浏览器自定义滚动条的技术文章）

- undefined

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，它可以启用水平滚动条功能，但滚动条会被隐藏，从而实现流畅的外观和感觉。

- Fillz Adebayo

Answer 3

应该使用 overflow-x: hidden 而不是 overflow-x: auto

- Oke Tega

---

这样你就无法水平滚动了。 - Luuuud

请查看此链接：https://dev59.com/j2Qn5IYBdhLWcg3wpYj0?rq=1 - Oke Tega

@OkeTega 这是用于垂直滚动的。 - Radmation