滚动鼠标，判断是下滚还是上滚

最新推荐文章于 2021-10-02 23:28:23 发布

懒人修

最新推荐文章于 2021-10-02 23:28:23 发布

阅读量712

点赞数

分类专栏： js/jquery

本文链接：https://blog.csdn.net/weixin_44268707/article/details/102006685

版权

js/jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

    /**
     *滚动鼠标，判断是下滚还是上滚
     *
     * 判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；
     * 两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
     */
    let afterTop = 0;
    const scrollFunc = function (e: any): void {
      const beforeTop = Number($('#emoticonPackage .EmotionList-con').css("top").split('px')[0]);
      e = e || window.event;
      if (e.wheelDelta) {// IE/Opera/Chrome
        if (e.wheelDelta === 120) {
          afterTop = +beforeTop + 15;
        }
        if (e.wheelDelta === -120) {
          afterTop = +beforeTop - 15;
        }
      } else if (e.detail) {// Firefox
        if (e.detail === 3) {
          afterTop = +beforeTop + 15;
        }
        if (e.detail === -3) {
          afterTop = +beforeTop - 15;
        }
      }
      if (afterTop >= 0) {
        $('#emoticonPackage .EmotionList-con').css({ top: 0 + 'px' });
      } else {
        if (Math.abs(afterTop) + $('#box #emoticonPackage .EmotionList')[0].offsetHeight >= $('#emoticonPackage .EmotionList-con')[0].offsetHeight) {
          $('#emoticonPackage .EmotionList-con').css({ top: $('#box #emoticonPackage .EmotionList')[0].offsetHeight - $('#emoticonPackage .EmotionList-con')[0].offsetHeight + 'px' });
        } else {
          $('#emoticonPackage .EmotionList-con').css({ top: afterTop + 'px' });
        }
      }
    };
    if (document.addEventListener) {
      document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }// W3C
    window.onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari
  }
  public componentWillUnmount(): void {
    if (document.addEventListener) {// 组件卸载后应将滚动事件给移除
      document.addEventListener('DOMMouseScroll', () => { }, false);
    }// W3C
    window.onmousewheel = null; // IE/Opera/Chrome/Safari
  }