一般chrome浏览器自带scroll:
添加scroll style
/* 整个滚动条 */ ::-webkit-scrollbar { width: 6px; background-color: #ffffff; } /* 滚动条轨道 */ ::-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:
原文 https://www.cnblogs.com/amylis_chen/p/11995324.html