VUE中鼠标滚轮使div左右滚动的方法详解


Posted in Vue.js onDecember 14, 2020

前言

技术点: addEventListener/attachEvent(传递参数)

功能描述: 鼠标停在div中,若div有x轴滚动条,则鼠标滚轮控制x轴滚动条横向滚动

一、单个实现

1.定义变量

data () {
	return {
		domObj: null
	}
}

2.编写方法

绑定事件

scrollFunction () {
 this.domObj = document.getElementById('ceshi') // 通过id获取要设置的div
 if (this.domObj.attachEvent) { // IE
 this.domObj.attachEvent('onmousewheel', this.mouseScroll)
 } else if (this.domObj.addEventListener) {
 this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
 }
 this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
 }

当鼠标放在id为‘ceshi'的div上时,鼠标滚轮滚动触发的事件

mouseScroll(event) { // google 浏览器下
 let detail = event.wheelDelta || event.detail
 let moveForwardStep = -1
 let moveBackStep = 1
 let step = 0
 step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
 event.preventDefault() // 阻止浏览器默认事件
 this.domObj.scrollLeft = this.domObj.scrollLeft + step
 }

3.触发

可以直接在mounted中触发

this.scrollFunction()

注意1: 如果是内容v-for循环出来的div,内容从后端获取,此时就不能在mounted中触发,因为mounted是挂载完成,这时请求还没开始,也就是说这时div还没x轴滚动条,所以应该在请求完成后触发scrollFunction()

注意2: 若在请求结束得到后端返回内容时触发,直接触发你会发现不起作用。个人理解:因为请求到数据,vue双向绑定监听到数据改变,触发页面更新,浏览器重绘或回流需要时间(如若有误,还望指正),所以可以用setTimeout

setTimeout(function () {
   this.scrollFunction()
   }, 100) // 0.1S后执行绑定方法

4.卸载

在beforeDistroy中卸载

if (!this.domObj) return
if (this.domObj.attachEvent) {
 this.domObj.detachEvent('onmousewheel', this.mouseScroll)
}
if (this.domObj.addEventListener) {
 this.domObj.removeEventListener('DOMMouseScroll', this.mouseScroll, false)
}

二、多个实现

关键点: addEventListener第二个参数Function传参

1.描述

如果一个页面中有多个div需要实现这个效果,按照上面的方法CV是当然可以的,不过就显得代码没有深度,所以用到了addEventListener传参。

2.addEventListener(参数)

绑定事件修改如下:

参数:obj:需要横向滚动的div存放位置

id:需要横向滚动的div的id

scrollFunction (obj, id) {
  obj = document.getElementById(id)
  if (obj.attachEvent) {
  obj.attachEvent('onmousewheel', this.mouseScroll(obj))
  } else if (obj.addEventListener) {
  obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
  }
  obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
 }

既然mouseScroll有了个参数obj,但是addEventListener第二个参数接收的是一个function。在触发执行时,如果想将参数传递进去的话,就得使用闭包的形式。具体修改如下:

mouserScroll (obj) {
  return function () {
  let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
  let detail, moveForwardStep, moveBackStep
  let step = 0
  if (e.wheelDelta) { // google 下滑负数: -120
   detail = e.wheelDelta
   moveForwardStep = -1
   moveBackStep = 1
  } else if (e.detail) { // firefox 下滑正数:3
   detail = event.detail
   moveForwardStep = 1
   moveBackStep = -1
  }
  step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
  e.preventDefault()
  obj.scrollLeft = obj.scrollLeft + step
  }
 }

注意:

1.因为有了传参,所以event直接放在mouserScroll(obj, event)这样是取不到event的,所以得用JS取event的方式写:

let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event

(document.add ? window.event : arguments[0] ? arguments[0] : event) 是FireFox里面取event的写法

2.触发

因为有了参数,所以触发的写法如下:

this.scrollFunction(this.domObj1, 'ceshi1') 
this.scrollFunction(this.domObj2, 'ceshi2')

其中,this.domObj1和this,domObj2需要先在data中定义,第二个参数是需要横向滚动的div的id值。

3.卸载

最后在beforeDistroy中卸载就好了,卸载代码同上。

总结

到此这篇关于VUE中鼠标滚轮使div左右滚动的文章就介绍到这了,更多相关VUE鼠标滚轮使div左右滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 动态生成拓扑图的示例
Jan 03 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
You might like
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
Python入门篇之函数
2014/10/20 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
基于python图像处理API的使用示例
2020/04/03 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python try except else使用详解
2021/01/12 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
监察建议书范文
2014/03/12 职场文书
2014年统战工作总结
2014/12/09 职场文书
大客户经理岗位职责
2015/04/09 职场文书
婚宴领导致辞
2015/07/28 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android