picture-
<style>
.scroll {
background-color: gray;
width: 500px;
height: 300px;
margin: 0 auto;
margin-top: 300px;
/* overflow: hidden; */
}
.scroll img {
width: 200px;
height: 500px;
}
</style>
<body>
<div id="app">
<div class="scroll" @wheel.prevent="scrollBarWheel">
<img src="./img/three.png" alt="" ref="scrollRef">
</div>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false,
apple: '50',
moveId: 0
}
},
methods: {
scrollBarWheel(e) {
console.log("this.moveId", this.moveId)
e = e || window.event;
if (e.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
console.log('0向上滚动')
this.moveId = this.moveId + 1
let x = this.moveId * 50
this.$refs.scrollRef.style.transform = `translateY(${
x}px)`
}
if (e.wheelDelta < 0) {
console.log('0向下滚动')
this.moveId = this.moveId - 1
let x = this.moveId * 50
this.$refs.scrollRef.style.transform = `translateY(${
x}px)`
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0) {
//当滑轮向上滚动时
console.log('9向上滚动')
}
if (e.detail < 0) {
console.log('9向下滚动')
}
}
},
},
mounted() {
},
computed: {
}
})
</script>
</body>