防止绝对div（随ScrollTrigger移动）拉长页面

Question

我想用 ScrollTrigger 做一个简单的视差效果。问题是包含“图像”（当前为红色框）的绝对 div 的高度比页面本身高。因此，由于图像已使用 ScrollTrigger 移动，因此页脚后有一个很大的空白。有什么方法可以防止这个大差距吗？

这是 JSFiddle。要查看实际问题，预览宽度 window 至少需要 1050 像素。

HTML

<body class="test">
    
<section class="hero">
    <div class="wrapper">
        <h1>ScrollTrigger</h1>
    </div>
</section>

<section class="main">
    <div class="wrapper">
            <div class="innerContainer">
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, ipsum at efficitur pellentesque, turpis ante rhoncus leo, quis dignissim felis ante.</h2>
            </div>
            <div id="parallax" class="imgContainer">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div>
            <!-- Uncomment to see the "ghost" of the red boxes -->
            <!-- <div class="imgContainer">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div> -->
    </div>
</section> 

<footer>
    <div class="wrapper">
        <h2>Footer</h2>
    </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<script src="index.js"></script>
</body>

SCSS

* {
    padding: 0;
    margin: 0;
    font-family: monospace;
}

.wrapper {
    position: relative;
    max-width: 1600px;
    margin: auto;
    padding: 20px;
}

body {
    .hero {
        height: 600px;
    }

    h1 {
        font-size: 120px;
    }

    h2 {
        font-size: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    &.home {
        .hero {
            background-color: aqua;
            position: absolute;
            height: 3000px;
        }

        p {
            width: 40%;
            font-size: 20px;
        }
    }

    &.test {
        .hero {
            background-color: rgb(255, 136, 0);
        }

        section {
            h2 {
                font-size: 180px;
            }
        }
    }
}

header {
    width: 100%;
    background-color: white;
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}

footer {
    width: 100%;
    background-color: rgb(225, 225, 225);
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}


.innerContainer {
    position: relative;
    z-index: 2;
}

.imgContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .img {
        background-color: yellow;
        width: 500px;
        height: 700px;
        margin-top: 200px;
        position: relative;

        &:first-of-type {
            margin-top: 0;
        }

        &:nth-child(2n+1) {
            margin-left: 50%;
        }
    }

    &:not(#parallax) {
        .img {
            background-color: transparent;
            border: 1px solid red;
        }
    }
}

JS

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

gsap.to('#parallax', {
    scrollTrigger: {
        trigger: '#parallax',
        toggleActions: "restart pause reverse pause",
        markers: true,
        start: 'top center',
        end: 'bottom bottom',
        scrub: 0.5
    },
    y: -2200,
    duration: 0.5
});

Answer 1

这是因为标记。标记被添加到它们需要去的 DOM 处，如果标记位于页面底部或之后，这会延长页面。

您可以删除 markers: true 或防止这种情况发生。

防止绝对div（随ScrollTrigger移动）拉长页面

Prevent absolute div (moved with ScrollTrigger) from lengthening the page

html

css

absolute

scrolltrigger