VUE鼠标滚动每次滚动一整屏
首先是HTML部分,就是几个简单的div,可以给每一个box不同的颜色区分
<template>
<div class="containe" ref="containe">
<div class="wrapBox" id="wrapBox">
<div class="box b1_bg"></div>
<div class="box b2_bg"></div>
<div class="box b3_bg"></div>
<div class="box b4_bg"></div>
</div>
</div>
</template>
其次是JavaScript部分
data () {
return {
isScrolling: false,
navValue: 0
}
},
mounted () {
this.$nextTick(() => {
// 为DOM绑定滚动事件
this.$refs.containe.onmousewheel = this.scrollFunc;
})
this.init()
},
methods: {
// 适配缩放比,如果不适配,每个box就100vh就可以了
init () {
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 获取当前屏幕高度
let zoom = window.devicePixelRatio === 1 ? 1 : (1 / window.devicePixelRatio).toFixed(2) // 获取当前屏幕缩放比
let height = ((windowHeight) * (1 - zoom)) + (windowHeight) // 将当前高度适配缩放比做到充满整个屏幕
$(".box").css('height', boxHeight + 'px');//初始化.box的高度 这里使用了jquery
},
// 滚动直接滚动一屏
scrollFunc (e) {
let zoom = window.devicePixelRatio === 1 ? 1 : (1 / window.devicePixelRatio).toFixed(2) // 获取缩放比
let height = document.getElementsByClassName('b1_bg')[0].style.height // 这里取的就是box的高度,也可以获取当前屏幕高度 window.innerHeight或者 document.documentElement.clientHeight都可以
height = Number(height.split('px')[0]) // 截取高度
let boxHeight = height * zoom // 适配缩放比
e.preventDefault() // 阻止事件冒泡
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.returnValue = false;
}
if (this.isScrolling) { // 判断是否可以滚动
// 设定一个事件,当前时间内只能滚动一次,以防第一次滚动没有结束又执行下一次滚动,
return false;
}
// 向下滚动 wgeekDeltaY -120为向下滚动,120为向上滚动
// 笔记本触摸板向下滚动时deltaY大于0,向上滚动时小于0
if (e.wheelDeltaY < 0 && e.deltaY > 0) {
this.next(boxHeight) // 执行向下滚动
} else {
this.prev(boxHeight) // 执行向上滚动
}
},
// 向下滚动
next (boxHeight) {
// 滚动具体高度
this.$refs.containe.scrollBy({top: boxHeight, behavior: 'smooth'});
// 当前页码
this.navValue = this.navValue === '5' ? '5' : String(Number(this.navValue) + 1)
this.move()
},
// 向上滚动
prev (boxHeight) {
this.$refs.containe.scrollBy({top: -boxHeight, behavior: 'smooth'});
this.navValue = this.navValue === '0' ? '0' : String(Number(this.navValue) - 1)
this.move()
},
// 设置一次滚动的时间,当前是1.05秒内只能滚动一次,多次滚动不生效
move () {
this.isScrolling = true
setTimeout(() => {
this.isScrolling = false
}, 1050)
},
}
以上就是vue每次鼠标滚轮滚动一次就滚动整个屏幕的效果。