Home > Article > Web Front-end > How to make the scroll bar not display in css
How to make the scroll bar not display in css
- 醉折花枝作酒筹Original
- 2021-06-01 16:22:1714410browse
In CSS, you can use the "::-webkit-scrollbar" pseudo-class selector to select the scroll bar, and then use the "display:none" style to not display the scroll bar; the specific syntax format is ":: -webkit-scrollbar{display:none;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
::-webkit-scrollbar CSS pseudo-class selector affects the style of an element's scroll bar. We can set the ::-webkit-scrollbar selector display property to none to hide the scroll bar.
How to set the scroll bar not to display:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
</div>
</body>
</html>Rendering:
Before setting the css effect:
After adding css style:
Code
<style>
::-webkit-scrollbar {display:none}
</style>Use css to set the scroll bar without display effect:
- ::-webkit-scrollbar — The entire scroll bar
- ::-webkit-scrollbar-button — The buttons on the scroll bar (up and down arrows )
- ::-webkit-scrollbar-thumb — Scroll slider on scrollbar
- ::-webkit-scrollbar-track — Scrollbar track
- ::-webkit-scrollbar-track-piece — The track part of the scrollbar without the slider
- ::-webkit -scrollbar-corner — The intersection part when there are both vertical and horizontal scroll bars
- ::-webkit-resizer — Partial styling of the corner part of some elements (for example: textarea’s draggable button)
The above is the detailed content of How to make the scroll bar not display in css. For more information, please follow other related articles on the PHP Chinese website!