持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

掘友们，大家好！昨天在原型图的文章中给大家提到了关于滚动条样式的封装。该篇文章给大家讲解一下，我在项目中对滚动条的封装，并应用于vue项目组件中。

应用场景

项目中针对盒子内容通常给予隐藏，并且添加滚动条滚动用于数据的展示和隐藏。一些UI框架中的滚动条样式也是可以设置的，比如说element框架的table表格。

如何封装

CSS针对滚动条有可选项，大家可以根据属性，设置不同的滚动条样式。

属性名	作用
::-webkit-scrollbar	滚动条整体部分
::-webkit-scrollbar-thumb	滚动条里面滑块，能上下左右移动(取决于是垂直还是水平)
::-webkit-scrollbar-track	滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button	滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece	内层轨道，滚动条中间部分(除去)
::-webkit-scrollbar-corner	边角，及两个滚动条的交汇处
::-webkit-resizer	两个滚动条的交汇处上用于拖动调整元素大小的小控件

在全局文件下添加属性

盒子样式设置滚动条

::-webkit-scrollbar{
  height: 9px;
  width: 9px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-style: dashed;
    border-color: transparent;
    border-width: 2px;
    background: #329afe;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #329afe;
}

element表格设置滚动条 在项目全局文件APP.vue内引入全局css文件。这里小编项目中使用的scss语法，大家可以参考设置。

.el-table__body-wrapper {
  &::-webkit-scrollbar{
    height: 9px;
    width: 9px;
  }

  &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      border-style: dashed;
      border-color: transparent;
      border-width: 2px;
      background: #329afe;
      background-clip: padding-box;
  }
  
  &::-webkit-scrollbar-thumb:hover {
      background: #329afe;
  }
}

预览效果

最后

滚动条样式的封装，可以增加用户体验，符合项目的主题，更加的美观。可以根据项目设置不同的样式。