How to hide scroll in css

How to hide scroll in css: 1. In Firefox, you can hide the scroll bar through the "scrollbar-width: none; /* Firefox */" attribute; 2. In IE browser, you can use " -ms-prefix" attribute defines the scroll bar style; 3. In Chrome and Safari, you can use the CSS scroll bar selector and then hide it through "display:none".

The operating environment of this tutorial: Windows 10 system, css3 version, DELL G3 computer

How to hide scroll in css?

Hide element scrollbars using CSS

How to hide scrollbars 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

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

Recommended study: "css video tutorial"

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