Chrome中jQuery滚动动画卡顿问题修复求助

Chrome里滚动动画卡顿的核心原因是scroll事件高频触发+频繁DOM操作/重排，结合你的代码，可通过以下几点优化解决：

• 给scroll事件加防抖
  scroll事件在滚动时会每秒触发几十次，直接执行逻辑会让浏览器不堪重负。用防抖函数控制逻辑只在滚动暂停或间隔10ms后执行，大幅减少计算次数。

• 提前缓存DOM元素和静态高度
  你原来的代码每次scroll都查询[data-scroll-id=presentation] > *这类元素，还重复计算高度，这会频繁触发浏览器重排。提前把这些元素和高度存起来，避免重复操作。

• 用transform替代top/left/marginTop
  修改top、left、marginTop会强制浏览器重新计算布局（重排），而transform: translate()属于GPU加速属性，只会触发合成操作，性能提升非常明显，是滚动动画的首选。

• 移除调试日志
  代码里的console.log会在滚动时持续输出，增加不必要的性能开销，生产环境务必移除。

• 用requestAnimationFrame同步样式更新
  把样式修改逻辑放进requestAnimationFrame，让浏览器在重绘前执行，避免布局抖动，让动画更流畅。

修改后的完整代码：

<script>
    const $ = jQuery;
    // 提前缓存DOM元素和静态计算值
    const contentEl = document.querySelector("[data-scroll-id=content]");
    const presentationInner = $('[data-scroll-id=presentation] > *');
    const servicesInner = $('[data-scroll-id=services] > *');
    const presentationHeight = presentationInner.height();
    const servicesHeight = servicesInner.height();
    // 预计算阈值，避免每次scroll重复计算
    const threshold1 = window.innerWidth;
    const threshold2 = window.innerWidth * 2 + presentationHeight;
    const threshold3 = window.innerWidth * 3 + presentationHeight;
    const threshold4 = threshold3 + servicesHeight;

    // 防抖函数：控制函数执行频率
    function debounce(func, delay) {
        let timer;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => func.apply(this, args), delay);
        };
    }

    // 滚动逻辑处理
    function handleScroll() {
        const scrollVal = $(document).scrollTop();
        
        // 让样式更新和浏览器重绘同步
        requestAnimationFrame(() => {
            if (scrollVal < threshold1) {
                contentEl.style.transform = `translate(${-scrollVal}px, ${scrollVal}px)`;
            } else if (scrollVal >= threshold1 && scrollVal < threshold2) {
                const relativeScroll = scrollVal - threshold1;
                contentEl.style.transform = `translate(${-threshold1}px, ${scrollVal}px)`;
                presentationInner.css('transform', `translateY(${-relativeScroll / 2}px)`);
            } else if (scrollVal >= threshold2 && scrollVal < threshold3) {
                const relScroll = scrollVal - threshold2;
                contentEl.style.transform = `translate(${-threshold1 - relScroll}px, ${scrollVal}px)`;
            } else if (scrollVal >= threshold3 && scrollVal < threshold4) {
                const relScroll = scrollVal - threshold3;
                contentEl.style.transform = `translate(${-window.innerWidth * 2}px, ${scrollVal}px)`;
                servicesInner.css('transform', `translateY(${-relScroll / 2}px)`);
            }
        });
    }

    // 绑定防抖后的滚动事件
    window.addEventListener('scroll', debounce(handleScroll, 10));
</script>

内容的提问来源于stack exchange，提问作者user22656153