-07-31 使用element 隐藏的scroll组件
如果项目有引入element-ui框架，觉得直接用element隐藏的scroll组件最方便快捷了
<el-scrollbar>插入想要引入的内容</el-scrollbar>
设置高度height，横向滚动条隐藏
.el-scrollbar__wrap {overflow-x: hidden;}
更改样式，例如设置背景色
.el-scrollbar__bar.is-vertical>div{background: rgba(163, 175, 189, 0.7);}
真的巨方便，记得要用外层的类去指向要改变样式的类：<<<或者/deep/。
-06-05 使用jq插件
一开始想用::-webkit-scrollbar 对滚动条样式进行修改，但是发现在Firefox浏览器上根本没有作用。
::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome,
苹果Safari)可以使用.【MDN】
后来发现一款兼容性较高的方法：引入滚动条插件 jquery.nicescroll
官网地址：/
1.安装 jquery 依赖
npm install jquery
安装 jquery.nicescroll 依赖
npm install jquery.nicescroll
2.需要在 webpack.config.js 中添加以下代码，并重新运行。
使用 ProvidePlugin 加载的模块在使用时将不再需要 import 和 require 进行引入
plugins: [new webpack.ProvidePlugin({$: "jquery",jquery: "jquery",})],
3.在 main.js 中引入
（这步使jquery和jquery.nicescroll全局可用）
import 'jquery'import 'jquery.nicescroll'
4.菜单绑定id，设置滚动条样式
<div id="content">...</div>$('#content').ready(function(){$('#content').niceScroll({ cursorcolor: "#A3AFBD",//#CC0071 光标颜色 cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0 touchbehavior: false,//使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "5px", //像素光标的宽度 cursorborder: "0", //游标边框css定义 cursorborderradius: "5px",//以像素为光标边界半径 autohidemode: "leave" //是否隐藏滚动条 仅在指针离开内容时隐藏"leave"});})
开发中遇到一个问题，点击退出登录，回到登录页面，相当于从首页跳转到登录页面，但是滚动条还是会出现在页面上
因为跳转路由，用this.router.push("/home")，所以其实页面一直存在，而且没有被销毁。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history
栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的
URL。【Vue Router】
一开始想在退出事件隐藏滚动条，但是并没有用，反而更糟糕，时而出现时而不见，真奇怪。
$("#content").getNiceScroll().hide(); //隐藏滚动条
就像其实滚动条一直都在，就是说明这个dom节点没有被销毁，那样就想在退出事件里面删除整个菜单节点就好了。
在菜单外节点绑定一个id，然后通过父节点对子节点进行删除
<div id="parent"><div id="content">...</div></div>//方法里调用var content=document.getElementById("content");var parent = document.getElementById("parent");if(content !=null){parent.removeChild(content);}
之后再怎么退出滚动条都不出现啦。
以上只是解决方法的其中之一，我发现还可以使用element-ui的隐藏组件scrollbar来试滚动条美规，有空学习一下，回头再总结
