单独设置浏览器滚动条上下箭头

最新推荐文章于 2024-04-26 16:52:43 发布

silence_xiang

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量209

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/silence_xiang/article/details/137883599

版权

解决方法

重点
::-webkit-scrollbar-button:vertical 给垂直方向的滚动条设置样式
::-webkit-scrollbar-button:vertical:start 上方向的按钮
::-webkit-scrollbar-button:vertical:start:decrement 上方向单个按钮
下方向同理

不知道为啥搜索出来的single-button不生效，设置出来的样式是两个箭头，很不好看，用了:decrement 才实现效果

 // 设置垂直滚动条样式
      ::-webkit-scrollbar:vertical {
        width: 13px;
      }

      /* 两个滚动条交接处 -- x轴和y轴 */
      ::-webkit-scrollbar-corner {
        background-color: transparent;
      }

      ::-webkit-scrollbar-button:vertical {
        display: block;
        height: 7px;
        width: 12px;
      }

      ::-webkit-scrollbar-button:vertical:start:decrement {
        border-width: 0 6px 6px 6px;
        border-style: solid;
        border-color: transparent transparent rgba(209, 237, 240, 0.3) transparent;
      }
      ::-webkit-scrollbar-button:vertical:end:increment {
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: rgba(209, 237, 240, 0.3) transparent transparent transparent;
      }