Comment modifier le style de flèche de la barre de défilement avec CSS-tutoriel CSS-php.cn

Comment modifier le style de flèche de la barre de défilement avec CSS

醉折花枝作酒筹

Libérer： 2023-01-06 11:15:05

original

7154 Les gens l'ont consulté

En CSS, vous pouvez définir le style de flèche de la barre de défilement via le sélecteur de pseudo-classe "::-webkit-scrollbar", la syntaxe "::-webkit-scrollbar-button{property:property value;} " ; le sélecteur permet de positionner les boutons aux deux extrémités de la piste de la barre de défilement, permettant d'affiner la position du petit carré en cliquant dessus.

Comment modifier le style de flèche de la barre de défilement avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

::-webkit-scrollbar Le sélecteur de pseudo-classe CSS affecte le style de la barre de défilement d'un élément. Il ne peut être utilisé que dans les navigateurs prenant en charge WebKit (par exemple, Google Chrome, Apple Safari).

Barre de défilement modifiable css :

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

Copier après la connexion

Exemple : Pour un div avec class="left-nav", modifiez le style de flèche de la barre de défilement

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

Copier après la connexion

Apprentissage recommandé : tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!