Vue+Element组件修改浏览器滚动条样式

前言：在Vue项目中会有使用到滚动条的情况，但是会遇到原生滚动条的样式不满足UI设计，因此需要改变滚动条的样式，下面使用两种方式来修改滚动条的样式，以Vue项目举例

1.第一种利用Element组件库

• 在Vue2.x的项目中我们可以利用Element UI组件el-scrollbar来改变滚动条的样式，虽然API文档中并没有给出el-scrollbar的使用方法，但可以正常使用的，使用方法如下：

  <template>
      <div class="outer">
          <el-scrollbar
              style="height: 100%;"
              class="scrollbar-for"
            >
              <!-- 内容部分 -->
              ...
          </el-scrollbar>
      </div>
  </template>
  <script lang="less">
  // 设置滚动条
  .scrollbar-for {
      .el-scrollbar__wrap {
          overflow-x: hidden; // 底部横向滚动条进行隐藏
      }
  }
  </script>
  

• 需要注意的是，使用滚动条组件时将需要滚动展示的内容包进组件内即可，如图中所示左侧的红色框为el-row就是包含在右侧红框内组件el-scrollbar的el-scrollbar__view里面，这样在超出指定范围height: 100%的高度时会出现滚动条，这个组件并不是完美的会出现一下小问题，如数据更新后组件未更新的问题，不能像原生一样按住shif键进行左右横向滚动的问题，这也可能是官方没有直接在API文档中给出的原因
  

• 在Vue3.x的项目中，可以配合使用Element Plus组件库中的Scrollbar滚动条组件，也就是el-scrollbar，这次在API文档中给出了明确的文档可以进行参考，详见Scrollbar 滚动条，使用与Element UI的el-scrollbar相差无异（使用前记得关注一下组件库版本与安装的版本）

2.利用CSS修改原生滚动条样式

• 如果使用的是Vue3.x的版本还是推荐使用Element Plus组件库，如果你使用了Ant Design Vue或者其它组件库，没有滚动条的组件库，又或是组件库的滚动条样式不满足设计的需要等原因，这时候就需要修改浏览器的原生滚动条了，下面就仿照el-scrollbar的样式修改原生滚动条并全局使用，代码如下：

  <template>
      <div class="container">
          ...
      </div>
  </template>
  ...
  <style scoped lang="less">
      .container {
        height: 100%;
        overflow: auto;
        // 滚动条整体部分
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
        &::-webkit-scrollbar-button {
          display: none;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track-piece {
          background-color: transparent;
        }
        // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
        &::-webkit-scrollbar-thumb {
          background: rgba(144, 147, 153, 0.3);
          cursor: pointer;
          border-radius: 4px;
        }
        // 边角，即两个滚动条的交汇处
        &::-webkit-scrollbar-corner {
          display: none;
        }
        // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
        &::-webkit-resizer {
          display: none;
        }
      }
  </style>
  

• 通过以上的样式设置在Chrome浏览器上就可以实现和组件库同样效果的滚动条了，而且原生滚动条支持按住shift可以进行横向滚动的操作，效果如下图所示：
  

• 但是打开Firefox浏览器后发现滚动条样式并没有生效，火狐提供了自己的CSS样式属性去设置滚动条的样式，比起谷歌可操作空间非常小，加上适配火狐的代码如下：

  <template>
      <div class="container">
          ...
      </div>
  </template>
  ...
  <style scoped lang="less">
      .container {
        height: 100%;
        overflow: auto;
        scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* 滑块颜色  滚动条背景颜色 */
        scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
        // 滚动条整体部分
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
        &::-webkit-scrollbar-button {
          display: none;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track-piece {
          background-color: transparent;
        }
        // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
        &::-webkit-scrollbar-thumb {
          background: rgba(144, 147, 153, 0.3);
          cursor: pointer;
          border-radius: 4px;
        }
        // 边角，即两个滚动条的交汇处
        &::-webkit-scrollbar-corner {
          display: none;
        }
        // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
        &::-webkit-resizer {
          display: none;
        }
      }
  </style>
  

• 在火狐浏览器上的效果如下：
  

• 关于IE的如何设置（就去说服UI吧），当然如果每个页面都要加这些样式属性上去就显得非常臃肿，可以直接在公共样式文件中加上，这里是common.less文件，需要滚动是通过设置overflow的属性值即可，代码如下：

  *{
      scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* 滑块颜色  滚动条背景颜色 */
      scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
      // 滚动条整体部分
  }
  *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  *::-webkit-scrollbar-button {
      display: none;
  }
  // 滚动条的轨道（里面装有Thumb）
  *::-webkit-scrollbar-track {
      background: transparent;
  }
  // 滚动条的轨道（里面装有Thumb）
  *::-webkit-scrollbar-track-piece {
      background-color: transparent;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  *::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.3);
      cursor: pointer;
      border-radius: 4px;
  }
  // 边角，即两个滚动条的交汇处
  *::-webkit-scrollbar-corner {
      display: none;
  }
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  *::-webkit-resizer {
      display: none;
  }
  

• 这样设置就可以完美解决滚动条样式问题了，至于如何关闭滚动条，代码如下：

  div {
      scrollbar-width: none;
      &::-webkit-scrollbar {
          display: none;
      }
  }
  

到这里问题就解决了，如果有更好的方式，欢迎补充和讨论🌈