如何防止ScrollTrigger控制的绝对定位div拉长页面产生底部空白

问题根源 #

你使用的绝对定位元素#parallax本身高度达4300px（由内部5个图片元素和间距累加得到），且将其作为ScrollTrigger的触发源，同时end参数设置为bottom bottom。ScrollTrigger会按照元素的原始位置和尺寸计算滚动结束位置，也就是#parallax的底部对齐视口底部的位置，这个位置远超过实际页面内容（页脚）的高度，因此页面被拉长出现多余空白。GSAP对元素的位移修改不会影响ScrollTrigger的初始滚动范围计算。

解决方案 #

核心是调整ScrollTrigger的触发逻辑，不再以超长的绝对定位元素作为滚动范围的计算依据，改用正常文档流中的父容器作为触发源：

修改后的JS代码 #

gsap.set("#parallax", {
    y: 0
});

gsap.to('#parallax', {
    scrollTrigger: {
        // 改用正常文档流的父容器作为触发源，父容器高度由内部内容决定，不会被绝对定位子元素撑高
        trigger: '.main .wrapper',
        toggleActions: "restart pause reverse pause",
        markers: true,
        start: 'top center',
        // 现在end的判定为父容器的底部碰到视口底部时动画结束，滚动范围和实际页面内容匹配
        end: 'bottom bottom',
        scrub: 0.5
    },
    y: -2200,
    duration: 0.5
});

可选补充调整 #

如果需要更灵活的控制动画滚动长度，也可以直接手动指定end的滚动偏移量，不用依赖元素高度计算：

scrollTrigger: {
    // 其他参数不变
    end: '+=2200', // 从start位置开始滚动2200px后动画结束
}

如果不需要#parallax超出父容器的部分在视差动画结束后继续显示，可以给父容器.main .wrapper添加overflow: hidden属性，进一步避免不必要的溢出。

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