javascript - 原生JS自制的scrollbar，如何消除滑块拖动时的卡顿？

Question

这是 事件监听，也是用docment对全局进行鼠标的移动及抬起监听了。

        const scrollStart =  (e: MouseEvent) => {
            e = e || window.Event;
            if (e.button == 0) { // 鼠标左键点击
                xPostion = e.clientX;
                originLeft = parseInt(this.scrollThumb.style.left) ? parseInt(this.scrollThumb.style.left) : 0;
                document.addEventListener('mousemove', scrollMove);
                document.addEventListener('mouseup', scrollEnd, {once: true});
            }
        }
        this.scrollThumb.addEventListener('mousedown', scrollStart);

        // let timeOutId = null;
        const scrollMove =  (e: MouseEvent) => {
            e = e || window.Event;
            e.preventDefault();
            e.stopPropagation();
            // document.removeEventListener('mousemove', scrollMove);
            // timeOutId = setTimeout(function() {
            //     document.addEventListener('mousemove', scrollMove);
            // }, 16);
            let move = e.clientX - xPostion;
            // window.requestAnimationFrame(() => {
                this.setPosition(originLeft + move); 
            // })                       
        }

        const scrollEnd = (e: MouseEvent) => {
            e = e || window.Event;
            // timeOutId = null;
            xPostion = 0;
            document.removeEventListener('mousemove', scrollMove);
        }

这是CSS，使用absolute对滑块进行定位

.scroll-track {
        position: absolute;
        left: 16px;
        top: 0;
        width: calc(100% - 52px);
        height: 20px;

        .scroll-thumb {
            position: absolute;
            left: 0;
            top: 0;
            margin: 4px 0 4px 0;
            height: 12px;
            background-color: lightgray;
        }
        .scroll-thumb:hover {
            background-color: gray;
        }
        .scroll-thumb:active {
            background-color: dimgrey;
        }
    }

Answer 1

上面的问题我没有描述清楚，关键是这个 this.setPosition(originLeft + move); 函数我写得有问题。

原来我是这样写的

setPosition(top: number) {
    if (top >= 0 && top <= this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio)) {
        this.scrollThumb.style.top = `${top}px`;
    }
    
}

由于需要判断边界，不能让滑块滑出边界，我做了鼠标滚动距离的判断，这样就导致出了边界之后，滑块不再动了，具体表现就是卡顿。所以我改了一下这个函数，完美解决。

setPosition(top: number) {
        if (top < 0) top = 0;
        if (top > this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio)) {
            top = this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio);
        }
        this.scrollThumb.style.top = `${top}px`;
        
    }

不再用条件判断来执行下一步操作，说白了就是把鼠标滑动的距离做个判断，超过了边界，直接把参数值固定在边界。move事件每次循环都会执行了。

Answer 2

要消除滑块拖动时的卡顿，你可以考虑以下几个优化方法：

1. 使用requestAnimationFrame：
   在你的scrollMove函数中，你已经注释掉了使用requestAnimationFrame的部分。使用requestAnimationFrame可以帮助你更平滑地更新DOM，因为它会在浏览器的下一次重绘之前调用你的更新函数。这有助于减少卡顿，因为它允许浏览器优化渲染过程。

   const scrollMove = (e: MouseEvent) => {
       e = e || window.Event;
       e.preventDefault();
       e.stopPropagation();
   
       let move = e.clientX - xPostion;
       window.requestAnimationFrame(() => {
           this.setPosition(originLeft + move);
       });
   }

2. 减少DOM操作：
   确保setPosition函数内部不会进行过多的DOM操作或复杂的计算。每次移动滑块时，仅更新必要的样式属性。
3. 优化CSS：
   确保CSS属性（如transform）的使用能够由GPU加速。虽然在这个特定的例子中，你可能主要依赖left属性来定位滑块，但了解这一点对于其他可能的性能优化是有用的。
4. 检查其他事件监听器：
   确保没有其他事件监听器（如scroll、resize等）在滑块拖动时触发，这些监听器可能会干扰或增加处理时间。
5. 考虑使用节流（Throttling）或防抖（Debouncing）：
   虽然在这个案例中可能不是必需的，但在某些情况下，如果mousemove事件触发得太频繁，你可以考虑使用节流或防抖技术来减少事件处理函数的调用次数。
6. 性能分析：
   使用浏览器的开发者工具（如Chrome DevTools的Performance标签页）来分析你的代码在拖动滑块时的性能表现。这可以帮助你识别任何可能导致卡顿的瓶颈。

应用上述建议后，你的滑块拖动体验应该会有所改善。特别是使用requestAnimationFrame，它通常是处理动画和流畅交互的首选方法。