一、设置全局滚动条隐藏
::-webkit-scrollbar {
display: none;
}
二、滚动条样式修改宽度
要想更改滚动条样式,我们需要对::-webkit-scrollbar进行样式调整,其中涉及到以下三个元素:
- 滚动条本身:::-webkit-scrollbar
- 滚动条轨道:::-webkit-scrollbar-track
- 滑块:::-webkit-scrollbar-thumb
下面是对应的代码示例:
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f2f2f2;
border-radius: 10px;
}
三、更改滚动条样式
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb{
background-color: #9f9f9f;
border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track{
background-color: #fcfcfc;
border-radius: 10px;
}
四、更改轨道条样式
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb{
background-color: #9f9f9f;
border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track{
background-color: #fcfcfc;
border-radius: 10px;
}
五、修改滚动条上下按钮
::-webkit-scrollbar-button {
}