复制样式
首先提供复制,效果在更下面。(未登录用户可以右键使用Edge的 网页捕获 之前名为 Web选择 来复制)
不建议直接使用此css代码,应该在前面指定 特定的元素 ,例如 ::-webkit-scrollbar变成.classname::-webkit-scrollbar否则可能会与其他 滚动条 产生意想不到的冲突。
::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar-track {
background-color: white;
}
::-webkit-scrollbar-thumb {
background-color: #8b8b8b;
/*border-radius: 4px;*/
height: 24px;
width: 24px;
border-style: dashed;
border-color: transparent;
border-width: 4px;
border-radius: 10px;
background-clip: padding-box;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:hover {
background-color: #606060;
}
/* 自定义滑动按钮 */
::-webkit-scrollbar-button:single-button {
background-color: white;
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
/* 上箭头 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 17px;
width: 17px;
background-position: center 4px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
/* 下箭头 */
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 17px;
width: 17px;
background-position: center 4px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
/* 左箭头 */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
/* border-radius: 5px 0 0 5px; */
height: 17px;
width: 17px;
background-position: 3px 3px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
/* 右箭头 */
::-webkit-scrollbar-button:single-button:horizontal:increment {
/*border-radius: 0 5px 5px 0;*/
height: 17px;
width: 17px;
background-position: 3px 3px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
实现效果
在Edge中的效果。
上面那个是高仿。下面那个是原版。
在Chrome中的效果。
上面那个是高仿。下面那个是原版。
预览效果
https://codepen.io/gxlydlyf/pen/dywbwLohttps://codepen.io/gxlydlyf/pen/dywbwLo
修改样式
以下代码不保证是最新修改
指定整个样式
::-webkit-scrollbar {
width: 17px;
}
滚动条轨道
::-webkit-scrollbar-track {
background-color: white;
}
滚动条滑块
::-webkit-scrollbar-thumb {
background-color: #8b8b8b;
height: 24px;
width: 24px;
border-style: dashed;
border-color: transparent;
border-width: 4px;
border-radius: 10px;
background-clip: padding-box;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
}
滚动条滑块悬浮样式
::-webkit-scrollbar-thumb:hover {
background-color: #606060;
}
自定义箭头按钮
::-webkit-scrollbar-button:single-button {
background-color: white;
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
上箭头
background-image为箭头图标。
基础样式
取消border-radius的注释,设置按钮圆角。
::-webkit-scrollbar-button:single-button:vertical:decrement {
/*border-radius: 5px 5px 0 0;*/
height: 17px;
width: 17px;
background-position: center 4px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
悬浮样式
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
点击箭头时未释放鼠标样式
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}
下箭头
background-image为箭头图标。
基础样式
取消border-radius的注释,设置按钮圆角。
::-webkit-scrollbar-button:single-button:vertical:increment {
/*border-radius: 0 0 5px 5px;*/
height: 17px;
width: 17px;
background-position: center 4px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
悬浮样式
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
点击箭头时未释放鼠标样式
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
左箭头
background-image为箭头图标。
基础样式
取消border-radius的注释,设置按钮圆角。
::-webkit-scrollbar-button:single-button:horizontal:decrement {
/* border-radius: 5px 0 0 5px; */
height: 17px;
width: 17px;
background-position: 3px 3px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
悬浮样式
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
点击箭头时未释放鼠标样式
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
右箭头
background-image为箭头图标。
基础样式
取消border-radius的注释,设置按钮圆角。
::-webkit-scrollbar-button:single-button:horizontal:increment {
/*border-radius: 0 5px 5px 0;*/
height: 17px;
width: 17px;
background-position: 3px 3px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
悬浮样式
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
点击箭头时未释放鼠标样式
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
已知差异
差异很多,如有 建议 或 解决办法 可到评论区提供。
相同
1.上下都有 滚动箭头 。
2.滚动条 轨道 一样。
3.滚动条滑块 差不多 ,原版略微长一点。
4. 箭头 点击有缩放效果。
差异
1.当 滚动条滑块 移到最顶部或最底部的时候,依旧可以触发 箭头按钮 的悬浮和点击效果;在原版中,一旦 滚动条滑块 移到最顶部或最底部, 箭头按钮 的点击事件和悬浮事件都不会生效。
2. 箭头按钮的图标 与原版有微小的差异,原版的 稍微扁一点 和 宽一点;图标来源于Iconify Design: All popular icon sets, one framework.
问题
1.当在 手机端 访问网页时,箭头按钮 不会出现。
2.如果 在浏览器 使用 Ctrl++ 放大网页的时候,滚动条将会被跟着一起放大。
3.一些 浏览器 或 较旧版本 不支持此样式。