Home > Web Front-end > CSS Tutorial > How to remove scroll bar style in css

How to remove scroll bar style in css

王林
Release: 2021-06-27 09:52:30
Original
15809 people have browsed it

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 */}].

How to remove scroll bar style in css

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 */
Copy after login

IE Browser

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

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

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 */}
Copy after login

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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template