Search code examples
javascriptjqueryhtmlcssparallax

Positioning element absolutely at the bottom of a section is adding an unwanted second scrollbar

I'm using parallax.js to create a simple scene with moving elements.

I'm positioning elements absolutely position: absolute at the top center, top left, top right and bottom center of a section and I'm adding a parallax effect on hover.

The top elements are working fine, but I'm seeing an additional scrollbar when I add the bottom element and I'm not sure how to get rid of it.

adding overflow-y: hidden just hides the entire element along with the additional scrollbar.

Demo 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'
    });
});
Solution

  • Add overflow-y: hidden; to '.hero' .

    As a rule of thumb, whenever there is a scrollbar that shouldn't be there, try with overflow property.

    https://jsfiddle.net/as18ukg2/