自定义scroll滚动条样式

一般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:

原文