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

时间:2021-01-28 金小熊丿人气:5

前言

技术点： 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中卸载就好了，卸载代码同上。

总结

加载全部内容