So ändern Sie den Pfeilstil der Bildlaufleiste mit CSS-CSS-Tutorial-php.cn

So ändern Sie den Pfeilstil der Bildlaufleiste mit CSS

醉折花枝作酒筹

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

Original

7154 Leute haben es durchsucht

In CSS können Sie den Pfeilstil der Bildlaufleiste über den Pseudoklassenselektor „::-webkit-scrollbar“ festlegen. Die Syntax lautet „::-webkit-scrollbar-button{property:property value;}“; Der Selektor kann eingestellt werden. Mit den Schaltflächen an beiden Enden der Bildlaufleistenspur können Sie die Position des kleinen Quadrats durch Klicken genau anpassen.

So ändern Sie den Pfeilstil der Bildlaufleiste mit CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

::-webkit-scrollbar Der CSS-Pseudoklassenselektor beeinflusst den Stil der Bildlaufleiste eines Elements. Er kann nur in Browsern verwendet werden, die WebKit unterstützen (z. B. Google Chrome, Apple Safari).

Änderbares Scrollbar-CSS:

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

Nach dem Login kopieren

Beispiel: Für ein Div mit class="left-nav" ändern Sie den Pfeilstil der Scrollleiste

::-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;
}

Nach dem Login kopieren

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Pfeilstil der Bildlaufleiste mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!