滚动条样式修改

ITKEP

已于 2023-09-13 10:47:33 修改

阅读量148

点赞数

文章标签：前端 javascript html

于 2023-09-13 10:46:27 首次发布

本文链接：https://blog.csdn.net/ITKEP/article/details/132847633

版权

   /* 滚动条区域样式 */
    .scroll-box::-webkit-scrollbar-thumb {
      width: 5;
      /* 宽度设置为0 */
      height: 5;
      /* 高度设置为0 */
      background: #000;
    }
    /* //整个滚动条样式 */
    .scroll-box::-webkit-scrollbar-track-piece {
      width: 5;
      /* 宽度设置为0 */
      height: 5;
      /* 高度设置为0 */
      background: #fff;
    }

主要设置这两个样式

:-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分
可以根据自己得需求进行相应得伪类设置