VUE中⿏标滚轮使div左右滚动的⽅法详解
⽬录
前⾔
⼀、单个实现
1.定义变量
2.编写⽅法
3.触发
4.卸载
⼆、多个实现
1.描述
2.addEventListener（参数）
2.触发
3.卸载
总结
前⾔
技术点： addEventListener/attachEvent(传递参数)
功能描述：⿏标停在div中，若div有x轴滚动条，则⿏标滚轮控制x轴滚动条横向滚动
⼀、单个实现
1.定义变量
data () {
return {
domObj: null
}
}
2.编写⽅法
绑定事件
scrollFunction () {
this.domObj = ElementById('ceshi') // 通过id获取要设置的div
if (this.domObj.attachEvent) { // IE
this.domObj.attachEvent('onmousewheel', useScroll)
} else if (this.domObj.addEventListener) {
this.domObj.addEventListener('DOMMouseScroll', useScroll, false)
}
usewheel = usewheel = useScroll
}
当⿏标放在id为‘ceshi'的div上时，⿏标滚轮滚动触发的事件
mouseScroll(event) { // google 浏览器下
let detail = event.wheelDelta || event.detail
let moveForwardStep = -1
let moveBackStep = 1
let step = 0
element表格横向滚动条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', useScroll)
}
if (this.domObj.addEventListener) {
veEventListener('DOMMouseScroll', useScroll, false)
}
⼆、多个实现
关键点： addEventListener第⼆个参数Function传参
1.描述
如果⼀个页⾯中有多个div需要实现这个效果，按照上⾯的⽅法CV是当然可以的，不过就显得代码没有深度，所以⽤到了addEventListener传参。
2.addEventListener（参数）
绑定事件修改如下：
参数：obj：需要横向滚动的div存放位置
id：需要横向滚动的div的id
scrollFunction (obj, id) {
obj = ElementById(id)
if (obj.attachEvent) {
obj.attachEvent('onmousewheel', useScroll(obj))
} else if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', useScroll(obj), false)
}
}
既然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左右滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！