How to hide scroll bar in css

Method: 1. Set the scroll bar width to none with the syntax "scrollbar-width:none;"; 2. Use the "-ms-overflow-style:none;" statement; 3. Use ":: -webkit-scrollbar{display:none}" statement.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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. 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 Browser

For Chrome and Safari browsers we have to use 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 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;
}

(Learning video sharing: css video tutorial)

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