Detailed explanation of the method of rolling div left and right by mouse wheel in VUE

Preface to the table of contents
1. Single implementation
1. Defining variables 2. Writing methods 3. Triggering
Step 4 Uninstall
2. Multiple implementations
Step 1 Describe
2. addEventListener (parameter)
Step 2 Trigger
Step 3 Uninstall
Summarize

Preface

Technical points: addEventListener/attachEvent (passing parameters)

Function description: The mouse stops in div. If div has x axis scroll bar, the mouse wheel controls x axis scroll bar to scroll horizontally

1. Single implementation

1. Define variables

data () {
	return {
		domObj: null
	}
}

2. Writing method

Binding event

scrollFunction () {
 this.domObj = document.getElementById('ceshi') //  Pass id Object to set 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
 }

Event triggered by mouse wheel scrolling when the mouse is placed on div whose id is' ceshi '

mouseScroll(event) { // google  Under the browser 
 let detail = event.wheelDelta || event.detail
 let moveForwardStep = -1
 let moveBackStep = 1
 let step = 0
 step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
 event.preventDefault() //  Block browser default events 
 this.domObj.scrollLeft = this.domObj.scrollLeft + step
 }

Step 3 Trigger

It can be triggered directly in mounted

this.scrollFunction()

Note 1: If it is div looping from the content v-for, the content is obtained from the back end, and it cannot be triggered in mounted at this time, because mounted is mounted, and the request has not started yet, that is to say, scrollFunction has not yet scrolled bar on x axis at this time, so scrollFunction () should be triggered after the request is completed

Note 2: If it is triggered at the end of the request and gets the content returned from the backend, you will find that it will not work if it is triggered directly. Personal understanding: Because the request to the data, vue bidirectional binding to monitor data changes, trigger page updates, browser redrawing or reflow needs time (if there is an error, please correct it), so you can use setTimeout

setTimeout(function () {
   this.scrollFunction()
   }, 100) // 0.1S Post-execution binding method 

Step 4 Uninstall

Uninstall in 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)
}

2. Multiple implementations

Key points: the second parameter of addEventListener, Function, is transmitted

Step 1 Describe

If there are multiple div in one page to achieve this effect, CV is of course possible according to the above method, but it seems that the code has no depth, so addEventListener is used to pass parameters.

2. addEventListener (parameter)

The binding event is modified as follows:

Parameter: obj: div storage location requiring horizontal scrolling

id: id for div that requires horizontal scrolling

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)
 }

Since mouseScroll has a parameter obj, the second parameter of addEventListener receives an function. When triggering execution, if you want to pass parameters in, you have to use the form of closures. The specific amendments are as follows:

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  Negative number of decline:  -120
   detail = e.wheelDelta
   moveForwardStep = -1
   moveBackStep = 1
  } else if (e.detail) { // firefox  Decline positive number: 3
   detail = event.detail
   moveForwardStep = 1
   moveBackStep = -1
  }
  step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
  e.preventDefault()
  obj.scrollLeft = obj.scrollLeft + step
  }
 }

Note:

1. Because of the parameter transmission, event is directly placed in mouserScroll (obj, event), so event cannot be obtained, so it must be written in the way that JS takes event:

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

(document. add? window. event: arguments [0]? arguments [0]: event) is the writing of event in FireFox

Step 2 Trigger

Because of the parameters, the trigger is written as follows:

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

Among them, this. domObj1, this and domObj2 need to be defined in data first, and the second parameter is id value of div that needs to be scrolled horizontally.

Step 3 Uninstall

Finally, just uninstall it in beforeDistroy, and the uninstall code is the same as above.

Summarize