How to use CSS to hide element scroll bars
Editor to share with you how to use CSS hidden element scroll bar, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
First, if you need to hide the scroll bar and display it when the content overflows, you just need to set the overflow:auto style. To hide the scroll bar completely, you only need to set overflow:hidden, but this will make the content of the element unscrollable. Today, there is no CSS rule that allows elements to hide scroll bars while still scrolling content, only by styling scroll bars for specific browsers.
Firefox browser
For Firefox, we can set the width of the scroll bar to none:
Scrollbar-width: none; / * Firefox * /
IE browser
For IE, we need to define the scroll bar style using the-ms-prefix attribute:
-ms-overflow-style: none; / * IE 10 + * /
Chrome and Safari browsers
For Chrome and Safari browsers, we must use the CSS scroll bar selector and then use display:none to hide 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.
Exampl
We use the CSS property above and the 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
}
The above is all the content of the article "how to use CSS to hide element Scroll Bar". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
