How to hide scrollbars using CSS?

This article will introduce how to use CSS to hide the scroll bar of the page. It has certain reference value. I hope it will be helpful to students learning CSS!

#How to hide scroll bars using CSS?

How to hide the scrollbar while still being able to scroll on any element?

First of all, if you need to hide the scroll bar and display the scroll bar 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 cause the element content to be non-scrollable.

To date, there is no CSS rule that allows an element to hide the scroll bar while still scrolling the content. This can only be achieved by setting the scroll bar style for a specific browser.

Firefox

scrollbar-width: none; /* Firefox */

ie browser

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

Chrome and Safari browser

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

(Recommended learning: CSS tutorial )

The above is the detailed content of How to hide scrollbars using CSS?. For more information, please follow other related articles on the PHP Chinese website!