vue3页面滚动、卡顿、掉帧问题的解决发方法

记录问题

这个问题是今天解决的，一直在想是不是速度的问题导致手动滚动页面的时候一卡一卡的，后面调节了几次页面发现不是速度的问题是我页面滚动那里没有添加一个平滑滚动效果；

这是原先的代码：

export default function (scrollElement) {
    let initialTouchY = 0;
    let scrollTop = 0;
    let isScrolling = false;

    const touchstart = (event) => {
        initialTouchY = event.touches[0].clientY;
        scrollTop = scrollElement.scrollTop;
        isScrolling = true;
    };

    const touchmove = (event) => {
        const touchY = event.touches[0].clientY;
        const distance = touchY - initialTouchY;
        const scrollHeight = scrollElement.scrollHeight - scrollElement.clientHeight;

        requestAnimationFrame(() => {
            const scrollDistance = Math.round(distance * 4.0);

            if (distance > 0) {
                scrollElement.scrollTo(0, Math.max(scrollTop - scrollDistance, 0));
            } else {
                scrollElement.scrollTo(0, Math.min(scrollTop + Math.abs(scrollDistance), scrollHeight));
            }
        });
    };

    const touchend = () => {
        isScrolling = false;
    };

    const start = () => {
        scrollElement.addEventListener('touchstart', touchstart);
        scrollElement.addEventListener('touchmove', touchmove);
        scrollElement.addEventListener('touchend', touchend);
    };

    const stop = () => {
        scrollElement.removeEventListener('touchstart', touchstart);
        scrollElement.removeEventListener('touchmove', touchmove);
        scrollElement.removeEventListener('touchend', touchend);
    };

    return {
        start, stop
    };
}

这样子写他的效果就是一卡一卡的，我们需要添加一个平滑效果的代码；通过添加scroll-behavior: smooth;属性，浏览器会自动处理滚动动画，从而提高滚动速度并减少掉帧现象。

 scrollElement.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果

添加该代码之后页面上下滑动时是平滑的，不会有一卡一卡的效果；

解决页面提高页面滚动速度并解决页面掉帧的现象，你可以尝试使用CSS属性scroll-behavior: smooth;来实现平滑滚动效果。这样可以让浏览器自动处理滚动动画，提高用户体验并减少掉帧现象。