欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

VUE中鼠标滚轮使div左右滚动

程序员文章站 2022-06-24 16:54:12
VUE中鼠标滚轮使div左右滚动文章目录VUE中鼠标滚轮使div左右滚动前言一、单个实现1.定义变量2.编写方法3.触发4.卸载二、多个实现1.描述2.addEventListener(参数)2.触发3.卸载前言技术点: addEventListener/attachEvent功能描述: 鼠标停在div中,若div有x轴滚动条,则鼠标滚轮控制x轴滚动条横向滚动一、单个实现1.定义变量data () {return {domObj: null}}2.编写方法绑定事件s...

VUE中鼠标滚轮使div左右滚动


前言

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

本人前端小白,以上内容如有错误,还望各位不吝赐教!
同意转载,转载注明出处就好!

本文地址:https://blog.csdn.net/weixin_47113728/article/details/111057671

相关标签: VUE vue.js