How to hide the scroll bar in html css

html CSS method to hide the scroll bar: 1. For Firefox, hide it through "scrollbar-width: none;"; 2. For IE, hide it through "-ms-overflow-style: none;" etc.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

html How to hide the scroll bar with css?

Hide element scroll bar using CSS

How to hide the scroll bar while still Can I 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. As of today, 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 Browser

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

scrollbar-width: none; /* Firefox */

IE Browser

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

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

Chrome and Safari browsers

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

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

Note: When you want to hide the scrollbar, it is best to set the overflow display to auto or scroll to ensure 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;
}

Recommended learning: "css video tutorial》

The above is the detailed content of How to hide the scroll bar in html css. For more information, please follow other related articles on the PHP Chinese website!