Question

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

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

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

添加overflow-y: hidden只会隐藏整个元素以及其他滚动条。

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'中。

根据经验，每当有不应该存在的滚动条时，请尝试使用溢出属性。

https://jsfiddle.net/as18ukg2/

绝对位于部分底部的定位元素正在添加不需要的第二个滚动条

1 个答案: