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