控制鼠标滚动，滚动指定的距离

控制鼠标滚轮滚动指定的距离

滚动整屏内容

效果案例

鼠标滚轮事件控制需要滚动区域的 top ,滚轮每滚动一次，top移动的值是屏幕的高度，设置body的overflow：hidden

<template>
  <div id="fome">
    <!-- banner区域 -->
    <nav class="banner">
      <video
        class="nav-video"
        src="@/assets/video/earth.mp4"
        autoplay
        loop
        muted
      ></video>
      <!-- 文字 -->
      <div class="ban-word">
        <img src="@/assets/images/banner-word.png" alt="" />
      </div>
    </nav>
    <!-- 服务平台 -->
    <section class="pro-plat">
      <h1 class="title">便捷的端与边缘AI服务平台</h1>
      <section class="pro-con">
        <article class="pro-son1">
          <div class="son-title1">支持多来源模型</div>
          <div class="son-con son-con1">
            <div class="son1-top">
              <div class="son1-left">
                <p class="left-p1">上传本地模型</p>
                <p>支持多种深度学习框架和网络模型</p>
              </div>
              <div class="son1-right"></div>
            </div>
            <div class="son1-top">
              <div class="son1-left">
                <p class="left-p1">使用开源模型</p>
                <p>直接扫描体验Github丰富的开源模型</p>
              </div>
              <div class="son1-right"></div>
            </div>
          </div>
        </article>
        <article class="pro-son2">
          <div class="son-title1">零门槛AI芯片</div>
          <div class="son-con"></div>
        </article>
        <article class="pro-son3">
          <div class="son-title1">本地部署</div>
          <div class="son-con"></div>
        </article>
      </section>
    </section>
    <!-- 核心优势 -->
    <section style="height:100%;background:pink;"></section>
    <!-- 底部 -->
    <section style="height:220px;background:black;"></section>
  </div>
</template>

<script>
export default {
  name: "",
  mounted() {
    var x = 0;
    function debounce(handler, delay) {
      var timer;

      return function() {
        var self = this,
          arg = arguments;

        clearTimeout(timer);

        timer = setTimeout(function() {
          handler.apply(self, arg);
        }, delay);
      };
    }
    // 处理函数
    // function handle() {
    //   console.log(Math.random());
    // }
    // 滚动事件
    // window.addEventListener("scroll", debounce(handle, 1000));

    var scrollFunc = function(e) {
      e = e || window.event;
      // console.log("e", e);
      var fome = document.getElementById("fome");
      fome.style.height = document.body.clientHeight + "px";
      var changeHeight = document.body.clientHeight;
      console.log("changeHeight", changeHeight);
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
          if (x <= -changeHeight * 2 - 1) {
            x = -changeHeight * 2;

            fome.style.top = `${-changeHeight * 2 + "px"}`;
          } else if (-changeHeight > x && x >= -changeHeight * 2) {
            console.log("x------", x);
            x = -changeHeight;
            fome.style.top = `${-changeHeight + "px"}`;
          } else if (x >= -changeHeight) {
            x = 0;
            fome.style.top = "0px";
            return;
          }

          console.log("fome", fome);

          fome.style.top += `${x + "px"}`;
        }
        if (e.wheelDelta < 0) {
          // 正确的指定距离的
          // if (x <= -2000) {
          //   x = -2234;
          //   fome.style.top = " -2234px";
          //   return;
          // } else {
          //   x += -1007;
          // }

          if (x <= -changeHeight * 2 + 200) {
            x = -changeHeight * 2 - 200;
            fome.style.top = `${-changeHeight * 2 - 200 + "px"}`;
            // fome.style.top = " -2234px";
            return;
          } else {
            x += -changeHeight;
          }
          console.log("x往下滚动", x);
          fome.style.top = `${x + "px"}`;
          //当滑轮向下滚动时
          console.log("下滚", document.body.clientHeight);
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        if (e.detail > 0) {
          //当滑轮向下滚动时
          console.log("下滚");
        }
        if (e.detail < 0) {
          //当滑轮向上滚动时
          console.log("上滚");
        }
      }
    };
    /*IE、Opera注册事件*/
    if (document.attachEvent) {
      document.attachEvent("onmousewheel", scrollFunc);
    }
    //Firefox使用addEventListener添加n滚轮事件
    if (document.addEventListener) {
      //firefox
      document.addEventListener("DOMMouseScroll", scrollFunc, false);
    }
    //Safari与Chrome属于同一类型
    // window.onmousewheel = document.onmousewheel = scrollFunc;
    window.addEventListener("mousewheel", debounce(scrollFunc, 200), false);

    /*
    event.wheelDelta 滚动方向
    上：120
    下：-120
    Firefox：event.detail 滚动方向
    上：-3
    下:3
    */
  },
};
</script>

<style scoped>
#fome {
  position: relative;
  top: 0;
  transition: all 0.5s;
}
.banner {
  position: relative;
  /* width: 100%; */
  height: 100vh;
  overflow: hidden;
}
.nav-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 100%; */
  /* width: 100%; */
  /* height: 100%; */
  /* height: 100vh; */
  /* height: 760px; */
  object-fit: fill;
}
.ban-word {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}
/* 产品与服务 */
.pro-plat {
  /* padding-top: 136px; */
  box-sizing: border-box;
  /* height: 735px; */
  height: 100vh;
}
.pro-plat .title {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  /* margin-bottom: 60px; */
}
.pro-plat .pro-con {
  display: flex;
  justify-content: space-between;
  /* height: 504px; */
}
.pro-son1,
.pro-son3 {
  width: 25%;
}
.pro-son2 {
  width: 40%;
}
.son-title1 {
  background: #d35201;
  color: #fff;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 28px;
  margin-bottom: 38px;
}
.son-con {
  height: 100%;
  padding: 36px 26px;
  box-sizing: border-box;
  background: #f4f4f4;
}
.son-con1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.son1-top {
  width: 100%;
  height: 132px;
  background: #fff;
}
.son-con1 .son1-left {
  width: 170px;
  font-size: 20px;
  margin-left: 30px;
}
.left-p1 {
  height: 60px;
  line-height: 60px;
}
</style>