vue div滚动,vue div 滚动条
本文主要介绍VUE鼠标滚轮使div左右滚动的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
目录
前言1。单一实现1。定义变量2。写作方法3。触发器4。卸载2。多重实现1。描述2.addEventListener(参数)2 .扳机3。卸载摘要。
前言
技术：addEventListener/attachEvent(传递参数)
描述：鼠标停在div中。如果div有一个X轴滚动条，鼠标滚轮控制X轴滚动条水平滚动。
一、单个实现
1.定义变量
data () {
返回{
domObj: null
}
}
2.编写方法
绑定事件
scrollFunction () {
this . DOM obj=document . getelementbyid(史策)//获取要按id设置的div
if(this . DOM obj . attach event){//IE
this . DOM obj . attach event( onmousewheel ，this.mouseScroll)
} else if(this . do mobj . addevent listener){
this . DOM obj . addevent listener( DOM mouse scroll ，this.mouseScroll，false)
}
this . DOM obj . onmousewheel=this . DOM obj . onmousewheel=this . mouse scroll
}
当鼠标放在id为“史策”的div上时，鼠标滚轮滚动触发的事件
Google浏览器下的mouse scroll(event){//鼠标滚动
let detail=event.wheelDelta 事件.细节
设moveForwardStep=-1
设moveBackStep=1
让步长=0
step=detail 0？向前移动一步* 100:向后移动一步* 100
Event.preventDefault() //阻止浏览器默认事件。
this . DOM obj . scroll left=this . DOM obj . scroll left步骤
}
3.触发
它可以在挂载时直接触发。
this.scrollFunction()
1:如果是一个内容被v-for循环的div，内容是从后端获取的，在mounted中是不能触发的，因为mounted已经完成了，请求还没有开始，也就是说这个时候div没有x轴滚动条，所以应该在请求完成后触发scrollFunction()。
注意：如果是在请求结束返回后端内容时触发，你会发现直接触发是不行的。个人理解：因为请求数据需要时间，所以vue双向绑定监测数据变化，触发页面更新，重绘或回流浏览器(如有错误请指正)，所以可以使用setTimeout。
setTimeout(function () {
this.scrollFunction()
}，100)//0.1s后执行绑定方法。
4.卸载
在beforeDistroy中卸载
如果(！this.domObj)返回
if (this.domObj.attachEvent) {
this . DOM obj . detachevent( onmousewheel ，this.mouseScroll)
}
if(this . DOM obj . addevent listener){
this . DOM obj . removeeventlistener( DOM mouse scroll ，this.mouseScroll，false)
}
二、多个实现
重点：addEventListener的第二个参数函数是作为参数传递的
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 . addevent listener( DOM mouse scroll ，this.mouseScroll(obj)，false)
}
obj . onmousewheel=obj . onmousewheel=this . mouse scroll(obj)
}
由于mouseScroll有一个参数obj，所以addEventListener的第二个参数接收一个函数。触发执行时，如果要传入参数，就必须使用闭包的形式。具体变化如下：
mouserScroll (obj) {
返回函数(){
设e=window.event document.all？window.event:参数[0]？参数[0]:事件
让细节，前进一步，后退一步
让步长=0
If (e.wheelDelta) {//谷歌下降负数：-120
详细信息=e.wheelDelta
moveForwardStep=-1
moveBackStep=1
} else if (e.detail) {//firefox向下滑动正数：3
详细信息=事件.详细信息
moveForwardStep=1
moveBackStep=-1
}
step=detail 0？向前移动一步* 100:向后移动一步* 100
预防默认()
一步到位
}
}
注意：
1.由于传递参数的原因，事件被直接放在mouserScroll(obj，event)中以至于无法获取事件，所以必须使用JS来获取事件：
设e=window.event document.all？window.event:参数[0]？参数[0]:事件
(document.add？window.event:参数[0]？Arguments[0]: event)是FireFox中取事件的编写方法。
2.触发
由于参数的原因，触发器编写如下：
this . scroll function(this . domobj 1， ceshi1 )
this . scroll function(this . DOM obj 2， ceshi2 )
其中this.domObj1和this，domObj2需要先在数据中定义，第二个参数是需要水平滚动的div的id值。
3.卸载
最后在beforeDistroy卸载就好了。卸载代码同上。
总结
这就是这篇关于VUE鼠标滚轮使div左右滚动的文章。有关VUE鼠标滚轮使div左右滚动的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。