一般chrome浏览器自带scroll:
添加scroll style
/* 整个滚动条 */
::-webkit-scrollbar {
width: 6px;
background-color: #ffffff;
display: none;
}
/* 鼠标指针浮动显示 */
:hover::-webkit-scrollbar{
display:block;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
/* 阴影 */
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
}
/* 滚定条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 30px;
background-color: #615b5b49;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
关于scroll:
CSS滚动条选择器
你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:
-
::-webkit-scrollbar — 整个滚动条. -
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). -
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. -
::-webkit-scrollbar-track — 滚动条轨道. -
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. -
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. -
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
语法
::-webkit-scrollbar { styles here }链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
更多scroll style:
