手动通过css来美化界面中的滚动条样式

默认浏览器的滚动条样式很丑，

我们在vue项目中，如果使用了element-ui的话，是可以借用他的滚动条的。

方法一：手动设置滚动条样式，

只能解决chrome浏览器等上面的样式。还可以。不要要求太多。

<div class="wrap">
<p>我是很长的内容</p>
</div>

设置样式：

  .wrap::-webkit-scrollbar {
    /* 滚动条宽度和高度 */
    width: 8px;
    height: 8px;
  }
  .wrap::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d4d6d9;
  }
  .wrap::-webkit-scrollbar-track-piece {
    /*滚动条里面轨道*/
    background-color: #fff;
    border-radius: 10px;
  }

最后看到的效果如下：

方法二、使用el-scrollbar来包裹元素

这是因为，element-ui虽然官方文档没有写，但是，它内部的确有这么一个组件。

<el-scrollbar wrap-class="" wrap-style="height: 200px;" view-style="" :native="false">
<p>我是很长的内容</p>
</el-scrollbar>

就是需要给外面的元素，一个确定的固定高度，才会生效。

展示效果如下：

这个是非常好的。