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

网络编程 2021-07-04 14:07www.168986.cn编程入门

这篇文章主要给大家介绍了关于VUE中鼠标滚轮使div左右滚动的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

前言

技术点 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左右滚动内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！

上一篇：Vue如何跨组件传递Slot的实现下一篇：vue3.0实现插件封装

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

目录

前言

一、单个实现

1.定义变量

2.编写方法

3.触发

4.卸载

二、多个实现

1.描述

2.addEventListener（参数）

2.触发

3.卸载

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

目录

前言

一、单个实现

1.定义变量

2.编写方法

3.触发

4.卸载

二、多个实现

1.描述

2.addEventListener（参数）

2.触发

3.卸载

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设