【Vue2.x插件】全局修改srcollBar

---上次发了个大佬的滚动条，发现不能用在body页面上。

---于是请求同学大佬给了究极解救方案

方案如下：

外部引入一个滚动条样式文件到main.js，然后然后在app中全局使用一下。binggo--可以修改全局的滚动条样式啦。而且整个页面的风格统一用户接受度更高。

——注意是全局都会影响的喔！

附上代码：

① 新建一个css后缀文件，放入assets静态资源文件夹下

::-webkit-scrollbar{width: 10px; height: 10px; background-color: #f5f5f5;}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgb(0, 0, 0, 0.3); background-color: #ffffff;}
::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgb(0, 0, 0, 0.3); background-color: #e1e1e1;}

② main.js中引入外部css文件

③ 在app.vue中全局使用：在CSS中引入

<style lang="less" scoped>
    @import url('./assets/myScroll.css');
</style>

在JS中引入样式 

<script>
    // 在JS中引入 外部css模块
    import './assets/myScroll.css'
    // 与@import效果相同, 会影响所有组件
</script>

 

④ 当当当：效果出来啦

⑤ 甚至还可以加上伪元素hover以及过渡属性transition，使的滚动条的交互更加生动哦