Locomotive Scroll背景YouTube视频滚动放大与页面滚动冲突问题

问题描述 #

基于Locomotive Scroll搭建的网站中，实现背景YouTube视频随滚动从1280px宽度放大至页面100%宽度的动画时，出现页面滚动卡顿、上下跳动的冲突，尤其在滚动至动画区间两端（向下滚动后再向上滚动）时问题明显。

核心原因 #

1. 频繁重排重绘：直接修改元素width属性会触发浏览器布局重排与绘制，与Locomotive Scroll的平滑滚动机制冲突，导致滚动偏移计算错误。
2. 事件触发过于频繁：Locomotive Scroll的scroll事件会在每帧滚动时触发，实时计算与样式修改的性能开销累积导致卡顿。
3. 动态尺寸计算的强制重排：每次滚动时实时获取offsetTop、offsetHeight，会强制浏览器提前完成布局计算，加剧性能损耗。
4. CSS过渡与JS修改冲突：CSS中width的过渡动画与JS实时修改叠加，导致动画状态不同步，出现跳动。

解决方案 #

1. 用Transform替代Width修改（核心优化） #

transform: scale()仅触发浏览器合成层更新，不会触发重排重绘，性能远优于修改width，同时保持居中定位：

修改后的CSS：

.portfolio-showcase {
    position: relative;
    z-index: 1;
}

.youtube-bg {
  position: absolute;
  bottom: 100px;
  left: 50%;
  /* 初始状态：居中+缩放1 */
  transform: translateX(-50%) scale(1);
  width: 1280px; /* 固定初始宽度，不再动态修改 */
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  z-index: -1;
  /* 改用transform的过渡动画 */
  transition: transform 0.5s ease-out;
  /* 告诉浏览器提前优化该属性 */
  will-change: transform;
}

#youtube-video {
    width: 100%;
    height: 100%;
}

.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.page-head-footer-overlay-fix {
    height: auto;
    max-height: 100vh;
    overflow: hidden;
}

iframe {
    pointer-events: none;
}

2. 节流Scroll事件+缓存静态值 #

• 用节流函数限制事件触发频率（匹配60fps的16ms间隔），减少计算次数
• 初始化时缓存元素的位置与尺寸，避免滚动时重复计算

修改后的JavaScript：

document.addEventListener("DOMContentLoaded", function () {
    const scrollContainer = document.querySelector("[data-scroll-container]");
    const youtubeVideoContainer = document.querySelector(".youtube-bg");

    if (scrollContainer && youtubeVideoContainer) {
        const scroll = new LocomotiveScroll({
            el: scrollContainer,
            smooth: true,
            getDirection: true,
            multiplier: 0.6,
            firefoxMultiplier: 50,
            resetNativeScroll: false // 禁用原生滚动重置，避免与动态元素冲突
        });

        const initialWidth = 1280;
        let maxWidth = window.innerWidth;
        const sectionUp = document.querySelector("#up");
        // 缓存静态元素的位置与高度，避免滚动时重复计算
        const sectionTop = sectionUp.offsetTop;
        const sectionHeight = sectionUp.offsetHeight;
        // 计算最大缩放比例
        let maxScale = maxWidth / initialWidth;

        // 节流函数：控制事件触发频率为60fps
        function throttle(func, delay = 16) {
            let lastCall = 0;
            return function(...args) {
                const now = Date.now();
                if (now - lastCall >= delay) {
                    lastCall = now;
                    func.apply(this, args);
                }
            };
        }

        const handleScroll = throttle((obj) => {
            const scrollY = obj.scroll.y;

            if (scrollY >= sectionTop && scrollY <= sectionTop + sectionHeight) {
                // 计算滚动进度（0-1）
                let progress = (scrollY - sectionTop) / sectionHeight;
                progress = Math.max(0, Math.min(1, progress));
                // 根据进度计算当前缩放比例
                const currentScale = 1 + progress * (maxScale - 1);
                // 应用transform，保持居中+缩放
                youtubeVideoContainer.style.transform = `translateX(-50%) scale(${currentScale})`;
            } else if (scrollY < sectionTop) {
                // 回到初始缩放状态
                youtubeVideoContainer.style.transform = `translateX(-50%) scale(1)`;
            } else if (scrollY > sectionTop + sectionHeight) {
                // 保持最大缩放状态
                youtubeVideoContainer.style.transform = `translateX(-50%) scale(${maxScale})`;
            }
        });

        scroll.on("scroll", handleScroll);

        // 监听窗口 resize，更新最大宽度与缩放比例
        window.addEventListener("resize", () => {
            maxWidth = window.innerWidth;
            maxScale = maxWidth / initialWidth;
        });
    } else {
        console.error("未找到data-scroll-container或.youtube-bg元素");
    }
});

3. 额外优化建议 #

• 给YouTube iframe添加loading="lazy"，减少页面初始加载的性能压力：

  <iframe
     id="youtube-video"
     src="https://www.youtube.com/embed/VCaCx0xOZEk?autoplay=1&mute=1&controls=0&loop=1&playlist=VCaCx0xOZEk&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3"
     frameborder="0"
     allow="autoplay; encrypted-media"
     allowfullscreen
     loading="lazy"
     ></iframe>
  

• 保持iframe { pointer-events: none; }，避免视频区域干扰滚动交互
• 若页面支持响应式，可在resize事件中重新计算初始宽度的适配值

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