自定义滚动条样式

---

webkit内核浏览器：

• 以下样式修改支持webkit内核的浏览器
• 该内核浏览器主要有：Google Chrome、Safari、Microsoft Edge等

属性描述：

::-webkit-scrollbar              //滚动条整体；可以用于定义宽度、是否显示
::-webkit-scrollbar-thumb 		 //滚动条里的滑块；可以用于定义滑块颜色、圆角效果等
::-webkit-scrollbar-track 		 //滚动条的轨道；可以用于定义轨道颜色、圆角效果等

示例：

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #fff;
}

隐藏整体页面的滚动条：

body::-webkit-scrollbar {
    display: none;
}

火狐浏览器：

• 火狐浏览器内核不是 webkit 故上述方法不适用于火狐
• 火狐支持以下配置

属性描述：

scrollbar-color             //滚动条的颜色配置；第一个颜色为滚动条滑块颜色，第二个为滚动条轨道颜色
scrollbar-width 		    //滚动条的宽度；默认值—auto、比默认值窄—thin、不显示—none

示例：

* {
    scrollbar-color: red blue;
    scrollbar-width: thin;
}

隐藏整体页面的滚动条：

/*这里和webkit浏览器不同 不应该使用body标签，需要使用html标签*/
html {
    scrollbar-width: none;
}

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。