文章/答案/技术大牛

发布

社区首页 >问答首页 >防止绝对div (使用ScrollTrigger移动)使页面变长

问防止绝对div (使用ScrollTrigger移动)使页面变长
EN

Stack Overflow用户

提问于 2021-11-02 14:51:43

回答 1查看 54关注 0票数 0

我想用ScrollTrigger制作一个简单的视差效果。问题是包含“图像”(目前是红色方框)的绝对div的高度比页面本身更高。所以在页脚之后有一个很大的差距，因为图像已经随着ScrollTrigger移动了。有什么办法可以防止这种巨大的差距吗？

这是一个JSFiddle。要查看实际问题，预览窗口的宽度需要至少为1050px。

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;
        }
    }
}

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
});

html

css

absolute

scrolltrigger

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-02 14:57:02

这是因为标记的缘故。标记被添加到它们需要到达的DOM中，如果标记位于页面底部或之后，则会加长页面。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69812417

复制

相似问题

问防止绝对div (使用ScrollTrigger移动)使页面变长
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止绝对div (使用ScrollTrigger移动)使页面变长EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止绝对div (使用ScrollTrigger移动)使页面变长
EN