How to hide only vertical scrollbars using CSS (in Firefox)?

0
votes

Using CSS, how can one allow vertical and horizontal scrolling (on overflow), but only show horizontal scrollbars (in Firefox)?

According to:
https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

One can simply use:

scrollbar-width: none

to hide scrollbars (in Firefox), but that seems to hide both vertical and horizontal scrollbars.

Reading Mozilla's developer specs:
https://developer.mozilla.org/docs/Web/CSS/scrollbar-width

Does not yield any more details on how to accomplish this.

Is it simply impossible to use CSS to hide only vertical scrollbars, while still displaying horizontal scrollbars?

2
cssuser-interfacescrollscrollbaruser-experience
maybe an extra container where you apply overflow:hidden then negative margin-right to the inner container to hide the scroll - Temani Afif

2 Answers

0
votes

This worked for me:

.div::-webkit-scrollbar:vertical {
  /* any of these */
  width: 0px;
  height: 0px;
  display: none;
  visibility: hidden;
}

.div::-webkit-scrollbar:horizontal {
  height: 20px;
}

If they don't work, try using !important

0
votes
div {
width: 100px;
height: 100px;
font-size: 48px;

overflow: auto; 
}

::-webkit-scrollbar {
height: 0px;
width: 8px;
border: 1px solid #fff;
}

::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}

::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}