js通过mousewheel事件手写滚轮条

mousewheel(event) :只有Firefox不支持的滚轮滚动事件
DOMMouseScroll(event): 只有Firefox支持的滚轮滚动事件

思路： 判断滚轮滚动方向，向上滚动与向下滚动分别实现向上与向下的逻辑偏移。整体比较简单。

rollLeftContent(e) {
      // console.log(e);
      let x = e.pageX;
      let y = e.pageY;
      let img = this.$refs.img;  
      //我需要的是图片滚动，放到图片上不发生滚动，所以剔除了图片内部滚动事件
      let rect = img.getBoundingClientRect()
      let y1 = rect.top
      let y2 = y1 + rect.height
      let x1 = rect.left
      let x2 = x1 + rect.width
      if (x < x1 || x > x2 || y < y1 || y > y2) {
        //不在元素内  
        //鼠标向下滚动
        if(e.wheelDelta < 0){
          let timeId;
          // 页面滚动停止100毫秒后才会执行下面的函数。
          clearTimeout(timeId);
          timeId = setTimeout(() => {
            this.scrollToTop();
          }, 100);
          //鼠标向上滚动
        }else if(e.wheelDelta > 0){
        
        }
      } else {
        // 在元素内
      }

    }

最后

以上就是伶俐烧鹅最近收集整理的关于js通过mousewheel事件手写滚轮条的全部内容，更多相关js通过mousewheel事件手写滚轮条内容请搜索靠谱客的其他文章。