Home > Article > Web Front-end > How to make the scroll bar not display in css
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:
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!