js实现鼠标滚轮一下滑动一个页面

最新推荐文章于 2024-04-25 15:58:41 发布

D.ZH4396

最新推荐文章于 2024-04-25 15:58:41 发布

阅读量1w

点赞数 7

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_58192506/article/details/120943495

版权

今天写项目需要实现一个功能，鼠标每滚动一次判断是否是往上滚动还是往下，每滚动一次切换一个页面。

html部分：

<body>
    <div id="wrap">
      <div style="background-color: #22b7e4" id="page1" class="page"></div>
      <div style="background-color: #70eec4" id="page2" class="page"></div>
      <div style="background-color: #e3e657" id="page3" class="page"></div>
      <div style="background-color: #8733b7" id="page4" class="page"></div>
      <div style="background-color: #c5274e" id="page5" class="page"></div>
    </div>
  </body>

css部分：

      *{
        margin: 0;
        padding: 0;
      }
      html,
      body{
        width: 100vw;
        overflow-y:hidden;
      }
      #wrap{
        position: absolute;
        width: 100%;
      }
      .page{
        width: 100%;
        height: 936px;
      }

js部分：

这里我们需要使用mousewheel监听事件

mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动

DOMMouseScroll是火狐浏览器中的写法

    //浏览器兼容
    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
      document.addEventListener("DOMMouseScroll", scrollFun, false);
    } else if (document.addEventListener) {
      document.addEventListener("mousewheel", scrollFun, false);
    } else if (document.attachEvent) {
      document.attachEvent("onmousewheel", scrollFun);
    } else {
      document.onmousewheel = scrollFun;
    }

    let index = 1;
    let curIndex = 1; //记录当前的页面
    let wrap=document.querySelector("#wrap");
    let pageNum=document.querySelectorAll(".page").length;
    let hei = 936;
    //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
    let startTime = 0, //翻屏起始时间
      endTime = 0,
      now = 0;
    
    //滚动事件处理函数
    function scrollFun(event) {
      startTime = new Date().getTime();
      let delta = event.detail || -event.wheelDelta;
      console.log(delta);
      //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
      //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
      if (endTime - startTime < -1000) {
        if (delta > 0 && parseInt(wrap.offsetTop) > -(hei * (pageNum - 1))) {
          //向下滚动
          index++;
          toPage(index);
        }
        if (delta < 0 && parseInt(wrap.offsetTop) < 0) {
          //向上滚动
          index--;
          toPage(index);
        }
        endTime = new Date().getTime();
      }
    }

    function toPage(idx) {
      if(idx!=curIndex){
        //jquery实现动画效果
        let delta = idx - curIndex;
        now = now - delta * hei;
        console.log(now);
        $("#wrap").animate(
          {
            top: now + "px",
          },
          500
        );
        curIndex=idx;
      }
      
    }