vue中鼠标滚动对应的长图片也上下滚动

最新推荐文章于 2024-05-04 01:51:35 发布

九点五亿少女的梦

最新推荐文章于 2024-05-04 01:51:35 发布

阅读量308

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44856917/article/details/128224576

版权

图片–
在这里插入图片描述

<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>