VUE鼠标滚动每次滚动一整屏

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每次鼠标滚轮滚动一次就滚动整个屏幕的效果。