通过UA判断，对滚动条样式进行不同的操作

浏览器滚动条的默认样式比较丑，有些情况下，又不能直接overflow:hidden掉。

本文阐述如何通过 document.styleSheets[0].insertRule 简单的实现pc端和移动端对浏览器样式的操作。

css部分

::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
} /* 滑块颜色 */

js部分

mounted(){
  this.$nextTick(function(){
    //通过UA修改滚动条的样式
    if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
      document.styleSheets[0].insertRule("::-webkit-scrollbar{height:3px}", 0);
    }else{
      document.styleSheets[0].insertRule("::-webkit-scrollbar{height:0px}", 0);
    }
  });
},

如果没有使用vue，直接引用nextTick中 if...else.. 的部分即可。需要注意的是在vue环境下，此段代码需要写在mounted这个生命周期内，如果写在updated周期，会添加多次，且在chrome中，无非正常显示滚动条。