<template>
<div id="ceshi">
<ul>
<li v-for="item in 1000">{{item}}</li>
</ul>
</div>
</template>
<script>
import aa from '../App.vue'
export default {
data() {
return {
domObj: null,
list:[]
}
},
mounted() {
this.scrollFunction()
},
methods: {
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
},
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
}
},
beforeDestroy() {
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)
}
}
}
</script>
<style>
#ceshi{
width: 500px;
background-color: antiquewhite;
margin: 100px auto;
overflow: hidden;
padding: 10px;
}
#ceshi ul{
list-style: none;
display: flex;
width: 20000px;
}
#ceshi ul li{
margin: 0 20px;
}
</style>
鼠标滚轮滑动滚动div
最新推荐文章于 2023-02-08 13:48:46 发布