js通过mousewheel事件手写滚轮条

77 阅读 0 评论 51 点赞

我是靠谱客的博主伶俐烧鹅，这篇文章主要介绍js通过mousewheel事件手写滚轮条，现在分享给大家，希望可以做个参考。

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 {
        // 在元素内
      }

    }