vue滚动条滚动事件(vue实现一个滚动条样式)
类别:编程学习 浏览量:113
时间:2021-10-02 01:12:58 vue滚动条滚动事件
vue实现一个滚动条样式起初是想修改浏览器滚动条样式来达到效果
但是查阅了资料 浏览器滚动条不能修改宽度与位置
没办法只能自己写
首先是滚动条样式
<li class="scrollBar" v-if="roleList.length > 5"> <li class="box" @mousedown="move" v-bind:style="{ width: activewidth + 'px' }" ></li> </li>
样式
.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 oli = e.target; // ScrollArea //算出鼠标相对元素的位置 let disX = e.clientX - oli.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 { //滑块的滑动距离 oli.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 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue怎么实现拖动(Vue拖动截图功能的简单实现方法)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue监控对象变化(Vue之监听方法案例详解)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue实现双向绑定原理(vue实现双向数据绑定)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
热门推荐
- thinkphp微信开发实例(ThinkPHP框架下微信支付功能总结踩坑笔记)
- opencv图像识别基础知识(opencv与numpy的图像基本操作)
- phpstudy报错(phpStudy运行帝国备份王出错解决方法)
- dedecms怎么调用标签(dedecms日期调用详细说明)
- 方法参数过多的解决方法
- python怎么用代码写出心形(六行python代码的爱心曲线详解)
- 虚拟服务器和云主机的区别(云服务器属于虚拟机么?它们有什么不同?)
- css中的float的使用
- php中数组使用技巧(php常用经典函数集锦数组、字符串、栈、队列、排序等)
- html radio样式(利用纯CSS自定义Checkbox和Radio的样式示例代码)