javascript - 将元素绝对定位在部分底部会添加不需要的第二个滚动条

Question

我正在使用 parallax.js创建一个带有移动元素的简单场景。

我将元素绝对 position: absolute 定位在一个部分的顶部中心、左上角、右上角和底部中心，并在悬停时添加视差效果。

顶部元素工作正常，但是当我添加底部元素时我看到了一个额外的滚动条，我不确定如何摆脱它。

添加 overflow-y: hidden 只是隐藏整个元素以及额外的滚动条。

演示 https://jsfiddle.net/cdfsze6r/

HTML

<section class="hero d-flex align-items-center" data-relative-input="true" id="scene">

    <div id="top-left-position">
        <div id="top-left" data-depth="0.2" class="layer"></div>
    </div>
    <div id="top-center-position">
        <div id="top-center" data-depth="0.4" class="layer"></div>
    </div>
    <div id="top-right-position">
        <div id="top-right" data-depth="0.3" class="layer"></div>
    </div>
    <div id="bottom-center-position">
        <div id="bottom-center" data-depth="0.3" class="layer"></div>
    </div>

    <div class="container">
        <div class="row ">
            <div class="col align-self-center text-center" id="hero-text">
                Hello World!
            </div>
        </div>
    </div>
</section>

<section class="section">
    <h2>section 2</h2>
</section>

<section class="section">
    <h2>section 3</h2>
</section>

<section class="section">
    <h2>section 4</h2>
</section>

CSS

html, body {
    height: 100%;
}
.hero {
    height: 100vh;
    background: radial-gradient(rgba(117, 73, 209, 1), rgba(150, 87, 185, 1));
    background-size: cover;
    overflow-x: hidden;
}
.section {
    height: 60vh;
}
#top-left {
    background: url('images/top-left.svg') no-repeat;
    background-position: top left;
    width: 350px;
    height: 350px;
}
#top-left-position {
    position: absolute;
    top: -60px;
    left: -100px;
}
#top-center {
    background: url('images/top-center.svg') no-repeat;
    background-position: top center;
    width: 1100px;
    height: 350px;
}
#top-center-position {
    position: absolute;
    top: -100px;
    left: 50vh;
}
#top-right {
    background: url('images/top-right.svg') no-repeat;
    background-position: top right;
    width: 400px;
    height: 500px;
}
#top-right-position {
    position: absolute;
    top: -50px;
    right: 300px;
}
#bottom-center {
    background: url('images/bottom-center2.svg') no-repeat;
    background-position: bottom center;
    width: 900px;
    height: 204px;
}
#bottom-center-position {
    position: absolute;
    bottom: 120px;
    left: 50vh;
}
#top-right-position, #top-center-position, #top-left-position, #bottom-center-position {
    z-index: 10;
}
#hero-text {
    z-index: 100;
    color: white;
    font-size: 32px;
}

JS

$(document).ready(function() {
    var scene = $('#scene').get(0);
    var parallaxInstance = new Parallax(scene, {
        hoverOnly: true,
        relativeInput: true,
        selector : '.layer'
    });
});

Answer 1

添加 overflow-y: hidden; 到 '.hero' 。

根据经验，只要有不应该出现的滚动条，请尝试使用 overflow 属性。

https://jsfiddle.net/as18ukg2/