vue实现一个滚动条样式

vue实现一个滚动条样式,博智网带你了解详细信息。

文章插图

文章插图
起初是想修改浏览器滚动条样式来达到效果
但是查阅了资料浏览器滚动条不能修改宽度与位置
没办法只能自己写
首先是滚动条样式
<p class="scrollBar" v-if="roleList.length > 5"><pclass="box"@mousedown="move"v-bind:style="{ width: activewidth + 'px' }"></p></p>
样式
.scrollBar {width: 500px;height: 6px;background: #d5dbf5;margin: 0 auto;margin-top: 72px;border-radius: 4px;position: relative;.box {width: 30px;height: 100%;background: #fff;border-radius: 4px;position: absolute;left: 0;}.box:hover {cursor: pointer;}}
滚动区域的样式这里就不写了
1 首先是滚动条滑块的宽度
mounted() {//滚动区域宽度我这里是遍历的user列表所以我拿到列表的长度*每个li的宽度即为总宽度let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;//可视区域宽度1065这个就是上图中白色背景盒子的宽度//滑块宽度 500为滚动条宽度计算这个宽度是为了拿到滑块可以滑动的距离这个下面会说到this.activewidth = 500 * (1065 / bgWidth);},
2 给滑块添加鼠标事件
move(e) {//获取目标元素let op = e.target;// ScrollArea//算出鼠标相对元素的位置let disX = e.clientX - op.offsetLeft;//滚动条可以滚动的距离let viewArea = 500 - this.activewidth;//滚动区域宽度let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;document.onmousemove = (e) => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;//left < 0 表示滑块已经到最左边//或者left > viewArea表示滑块到最右边if (left < 0 || left > viewArea) {//console.log("到头了");//这个时候要清空事件不然滑块就划出滚动条区域了document.onmousemove = null;} else {//滑块的滑动距离op.style.left = left + "px";//滚动区域的滑动距离 = 滚动区域宽度*(滑块滑动的距离/500)this.$refs.ScrollArea.style.left ="-" + bgWidth * left / 500 + "px";}};document.onmouseup = (e) => {document.onmousemove = null;document.onmouseup = null;};},
【vue实现一个滚动条样式】到此这篇关于vue实现一个滚动条样式的文章就介绍到这了,更多相关vue实现滚动条内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧！

vue实现一个滚动条样式

推荐阅读

昆蟹和青蟹哪个肉多

蓝牙耳机共享联系人有啥用蓝牙耳机共享联系人有什么用

视频因格式不支持或者服务器或网络的问题无法加载视频因格式不支持无法加载方法

白肌酸是什么东西

我梦见摘南瓜是什么意思梦到偷摘南瓜是什么意思

刃可以带全生命吗

对付阴道炎怎么办

动脉导管未闭的原因有哪些？

喝酒说朋友的经典语录

人民的正义播出时间

凯洛菲抗皱亮颜水是水乳吗

群英冕冠给谁穿

硬卧哪个铺位好

粉色沙滩是怎么形成的粉色沙滩形成的原因

2024江西卫生专业技术资格考试网上缴费时间

萦绕于心的意思是什么词语萦绕于心什么意思

大疆无人机的电机是哪个国家的

什么人适合买天选四

什么是词什么是曲词曲的区别在哪里怎么判断是词还是曲

海盐可以炒菜吗