纯CSS Edge滚动条(高仿),使用::-webkit-scrollbar

复制样式

首先提供复制,效果在更下面。(未登录用户可以右键使用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/dywbwLoicon-default.png?t=N6B9https://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.一些 浏览器较旧版本 不支持此样式。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值