How to remove scroll bar style in css

The way to remove the scroll bar style in css is to set the [overflow:hidden] style for the scroll bar and completely hide the scroll bar, for example [::-webkit-scrollbar {display: none; /* Chrome Safari */}].

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

If we want to remove the scroll bar style, we can actually choose to hide them to achieve the purpose of removing the scroll bar.

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. There is currently 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 defines the scrollbar style:

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

Chrome and Safari

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

::-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-hide 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;
}

Related video tutorial sharing : css video tutorial

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