修改浏览器滚动条样式

大家好，欢迎来到IT知识分享网。

一、设置全局滚动条隐藏

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