如何使用::-webkit-scrollbar来隐藏水平或垂直滚动条单个方向？

Question

::-webkit-scrollbar{
  height:0px
  width:0px;
}
// hides both vertical and horizontal scrollbar

如何仅隐藏垂直或水平滚动条？保留滚动功能，只隐藏其中一种方向。

我想隐藏垂直滚动条，但仍需保留滚动功能，overflow-hidden 会禁用整个滚动条。

- user956609

---

你尝试过使用 overflow-x: hidden;（隐藏水平滚动条）或 overflow-y: hidden; 吗？ - I like eating pizza thursdays

我想隐藏垂直滚动条而不是水平滚动条，但仍然使滚动条正常工作，使用overflow-hidden将禁用滚动条。 - user956609

Answer 1

这是我隐藏滚动条的解决方案。

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

"

html可以替换为您想要隐藏滚动条的任何元素。

"

- user12782536

---

我想隐藏垂直滚动条而不是水平滚动条，但仍然使滚动条正常工作，使用overflow-hidden会禁用滚动条。 - user956609

width 值是用于垂直条的。height 值是用于水平条的。 - Bruno Freire

Answer 2

在-webkit-scrollbar中，width的值是指垂直滚动条的宽度，height的值是指水平滚动条的高度。

html::-webkit-scrollbar {
    width: 5px; 
    height: 0px; /* If value is 0px, the horizontal bar will disappear but still works*/
}

- Bruno Freire

Answer 3

针对垂直滚动隐藏和水平滚动自动：

overflow: hidden;
overflow-x: auto;

如果要隐藏水平滚动条，垂直滚动条自动出现：

overflow: hidden;
overflow-y: auto;

- Ehsan

---

我想隐藏垂直滚动条而不是水平滚动条，但仍然使滚动条正常工作，使用overflow-hidden会禁用滚动条。 - user956609

overflow: hidden; overflow-x: auto; 溢出：隐藏； 溢出-x：自动； - Ehsan

哦，现在我明白了。要为每个浏览器定制滚动条样式，您应该使用Simplebar库。https://grsmto.github.io/simplebar/ - Ehsan