How to hide the slider in css

The way to hide the slider in CSS is to set [overflow:hidden]. If we want to hide the scroll bar and display it when the content overflows, we only need to set [overflow:auto].

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

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 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 sharing: css video tutorial

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