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

这是 事件监听，也是用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;
        }
    }