js通过mousewheel事件手写滚轮条

最新推荐文章于 2024-01-27 13:05:37 发布

原创最新推荐文章于 2024-01-27 13:05:37 发布 · 824 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

这篇博客介绍了如何处理滚轮滚动事件，特别是针对Firefox浏览器的DOMMouseScroll事件。作者通过判断滚轮滚动方向，实现了在图片上的向上和向下滚动逻辑。当鼠标不在图片范围内时，滚动会触发页面的默认行为；反之，在图片范围内则执行自定义的滚动效果。此外，还使用了setTimeout来延迟执行滚动操作，确保页面滚动停止后再进行图片的滚动，提高了用户体验。

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 {
        // 在元素内
      }

    }