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

1
2
3
4
5
data () {
	return {
		domObj: null
	}
}

1
2
3
4
5
6
7
8
9
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
 }

1
2
3
4
5
6
7
8
9
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
 }

1
this.scrollFunction()

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

1
2
3
4
5
6
7
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)
}

1
2
3
4
5
6
7
8
9
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)
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event

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