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+iview分页组件的封装
Nov 17 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
大学军训感言
2014/01/10 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
公司管理建议书范文
2014/03/12 职场文书
霸王洗发水广告词
2014/03/14 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
Python访问Redis的详细操作
2021/06/26 Python
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python