js handwritten scroll bar through mousewheel event

mousewheel(event): Only the wheel scrolling event that Firefox does not support
DOMMouseScroll(event): Only the wheel scrolling event that Firefox supports

Idea: Determine the rolling direction of the scroll wheel, scroll up and scroll down to achieve upward and downward logical offsets respectively. Overall it is relatively simple.

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

    }

Guess you like

Origin blog.csdn.net/drunk2/article/details/128427295