Example code for hiding element scrollbars using CSS

How can I hide the scrollbars while still being able to scroll on any element?

First, if you need to hide the scroll bar and display it when the content overflows, you only need to set the overflow: auto style. If you want to completely hide the scroll bar, just set overflow: hidden, but this will make the element content unscrollable. To date, there is no CSS rule that allows an element to hide the scrollbar while still allowing the content to scroll. This can only be achieved by setting the scrollbar style for specific browsers.

Firefox

For Firefox, we can set the scrollbar width to none:

scrollbar-width: none; /* Firefox */

Internet Explorer

For IE, we need to use the -ms-prefix attribute to define the scrollbar style:

-ms-overflow-style: none; /* IE 10+ */

Chrome and Safari browsers

For Chrome and Safari browsers, we have to use the CSS scrollbar selector and then hide it using display:none:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

Note: When you want to hide the scroll bar, it is best to set the overflow display to auto or scroll to ensure that the content is scrollable.

Example

We use the above CSS properties and overflow to implement the following example - hiding the horizontal scroll bar while allowing the vertical scroll bar:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x:hidden;
  overflow-y: auto;
}

Summarize

The above is the sample code for using CSS to hide the scroll bar of elements. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!