How to set scroll bar width in css

In css, you can use the "::-webkit-scrollbar" selector and width attribute to set the width of the scroll bar. The syntax is "::-webkit-scrollbar{width: width value;}"; this selector uses For selecting the entire scroll bar, the width attribute is used to set the width of the selected element.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, thinkpad t480 computer.

The method idea is as follows:

Use the ::-webkit-scrollbar pseudo-class selector in CSS to set the scroll bar style, and set the scroll bar through the width attribute in this pseudo-class selector width.

::-webkit-scrollbar CSS pseudo-class selector affects the style of an element's scroll bar.

You can use the following pseudo-element selectors to modify the scroll bar style of various webkit browsers:

::-webkit-scrollbar — the entire scroll bar

:: -webkit-scrollbar-button — Button (up and down arrows) on the scroll bar

::-webkit-scrollbar-thumb — Scroll slider on the scroll bar

::-webkit-scrollbar -track — Scrollbar track

::-webkit-scrollbar-track-piece — The track part of the scroll bar without slider

::-webkit-scrollbar-corner — When there is also a vertical The intersection of the scroll bar and the horizontal scroll bar

::-webkit-resizer — Partial styles of the corner part of certain elements (for example: draggable buttons of textarea)

Implementation code :

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

Related recommendations: CSS tutorial

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