How to make the scroll bar not display in css-CSS Tutorial-php.cn

How to make the scroll bar not display in css

醉折花枝作酒筹

Release： 2023-01-06 11:16:01

Original

14474 people have browsed it

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;}".

How to make the scroll bar not display in css

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>

Copy after login

Rendering:

Before setting the css effect:

How to make the scroll bar not display in css

After adding css style:

Code

<style>
     ::-webkit-scrollbar {display:none}
</style>

Copy after login

Use css to set the scroll bar without display effect:

How to make the scroll bar not display in css

##css scroll bar selector:

::-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)

Recommended learning:

css video tutorial

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!