【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来试滚动条美规,有空学习一下,回头再总结

你可能感兴趣的:(vue,vue,滚动条样式,scrollbar,element-ui)