【vue】 “jquery.nicescroll” 改变菜单滚动条样式 & 滚动条隐藏，“scrollbar”：element隐藏组件

2019-07-31 使用element 隐藏的scroll组件
如果项目有引入element-ui框架，觉得直接用element隐藏的scroll组件最方便快捷了

插入想要引入的内容

设置高度height，横向滚动条隐藏

.el-scrollbar__wrap {
  overflow-x: hidden;
}

更改样式，例如设置背景色

.el-scrollbar__bar.is-vertical>div{
  background: rgba(163, 175, 189, 0.7);
}

真的巨方便，记得要用外层的类去指向要改变样式的类：<<< 或者 /deep/ 。

2019-06-05 使用jq插件

一开始想用::-webkit-scrollbar 对滚动条样式进行修改，但是发现在Firefox浏览器上根本没有作用。

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome,
苹果Safari)可以使用.【MDN】

后来发现一款兼容性较高的方法：引入滚动条插件 jquery.nicescroll

官网地址：https://nicescroll.areaaperta.com/

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，设置滚动条样式

...

$('#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，然后通过父节点对子节点进行删除

	
...


//方法里调用
var content=document.getElementById("content");
var parent = document.getElementById("parent");
if(content !=null){
	parent.removeChild(content);
}

之后再怎么退出滚动条都不出现啦。

以上只是解决方法的其中之一，我发现还可以使用element-ui的隐藏组件scrollbar来试滚动条美规，有空学习一下，回头再总结