Hot to use ::-webkit-scrollbar to hide horizontal bar or vertical bar single direction?

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

How to use this to only hide vertical or horizontal? not both direction

I want to hide vertical scroll, but still work, overflow-hidden will disable scroll

web-frontend frontend webkit scrollbar css
3 Answers

In -webkit-scrollbar, the width value is for the vertical bar, the height value is for the horizontal bar.

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

Here's my solution to hide the scrollbar

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 can be replaced with any element you want to hide the scrollbar of.

Admin1

For vertical scroll hidden and horizontal scroll auto:

overflow: hidden;
overflow-x: auto;

And for horizontal scroll hidden and vertical scroll auto:

overflow: hidden;
overflow-y: auto;
user_61956440
Related