How to modify scroll bar arrow style with css-CSS Tutorial-php.cn

How to modify scroll bar arrow style with css

醉折花枝作酒筹

Release： 2023-01-06 11:15:05

Original

7154 people have browsed it

In css, you can set the scroll bar arrow style through the "::-webkit-scrollbar" pseudo-class selector, the syntax "::-webkit-scrollbar-button{property:property value;}"; the The selector sets the buttons at both ends of the scroll bar track, allowing the position of the small square to be fine-tuned by clicking on it.

How to modify scroll bar arrow style with 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. It can only be used in browsers that support WebKit (for example, Google Chrome, Apple Safari).

Modifiable scroll bar css:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

Copy after login

Example: For a div with class="left-nav", modify the scroll bar arrow style

::-webkit-scrollbar-button {
    display: block; 
} 
::-webkit-scrollbar-button:horizontal:single-button:start {
    width: 24px;  
    background: url("../img/scroll_btn.png") 0 -52px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    width: 24px;    
    background: url("../img/scroll_btn.png") 0 -77px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:start {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px 0px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px -26px no-repeat;    
    cursor: pointer;
}

Copy after login

Recommended learning: css video tutorial

The above is the detailed content of How to modify scroll bar arrow style with css. For more information, please follow other related articles on the PHP Chinese website!