How can I disable my custom scrollbar from appearing horizontally?

user_12340668 0
Viewed 128

I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.

I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.

Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.

Here's my code:

::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
  background-color: hsl(270, 2.9%, 48.7%);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(270, 2.9%, 78.7%);
}

edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.

css
1 Answers

The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.

It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.

Using overflow: hidden will disable the scroll and that’s not what we want.

So we’ll need another way to hide the scrollbar. Unfortunately, there is no universal CSS property that does something like this

div {
  scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.

For Firefox, we can set the scroll-bar width to none.

scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style

-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.

Then apply display: none to hide it.

::-webkit-scrollbar { 
    display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.

::-webkit-scrollbar { 
  width: 0;
  height: 0;
}

https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/

Nevertheless, the following solution took effect in questioner's situation:

overflow-x: hidden !important;
user_157758900
Related