热用::-webkit-scrollbar隐藏单向横条或竖条？

Question

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

如何使用它仅隐藏垂直或水平？不是两个方向

我想隐藏垂直滚动，但仍然有效，溢出隐藏将禁用滚动

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

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

Answer 2

在

-webkit-scrollbar

中，

width

值针对垂直条，

height

值针对水平条。

html::-webkit-scrollbar {
    width: 0; /* to hide the scrollbar from view but still keep the scroll behaviour, width must be set to zero, as per the question asked*/
    height: 0px; /* If value is 0px, the horizontal bar will disappear but still works*/
}

Answer 3

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

overflow: hidden;
overflow-x: auto;

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

overflow: hidden;
overflow-y: auto;