Why is the scrollbar not hidden in my container element that has CSS parallax applied to it?

Question 1

I used a tutorial to try parallax on a website and everything works fine, except I have a scrollbar within the parallax element. There is no margin on the body.

I was not able to find my answer by looking at other posts on here.

Parallax CSS

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'body-reg';
}

.row {
    width: 100%;
}

* {
    box-sizing: border-box;
}

.B1 {
    height: calc(100vh - 20px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-perspective: 10px;
    perspective: 10px;
}

.B1 .container--parallax {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

.B1 .container--parallax .background {
    transform: translateZ(-10px) scale(2);
}

.B1 .container--parallax .foreground {
    transform: translateZ(-5px) scale(1.5);
}

.B1 .container--parallax .background,
.B1 .container--parallax .foreground {
    display: block;
    position: absolute;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
}

HTML

<body>
    <main>
        <section class="row B1">

            <div class="container--parallax">
                <img src="/assets/images/background.png" alt="Background" class="background"> 
                <img src="/assets/images/foreground.png" alt="Foreground" class="foreground">
            </div>

            <section class="row B2">

                <!-- add content -->

            </section>
        </section>

        <section class="row B3">

            <!-- more content -->

        </section>
    </main>
</body>

The below body serves a purpose unrelated to this but has no styling applied to it.

There should not be a scrollbar inside of .B1, so why is there?

Question 2

The reason is because you have overflow-y: auto; inside your B1 class and another style is causing its content to exceed its size. Change your B1 class to look like this if you want to prevent overflow on both the x and y axis.

.B1 {
    height: calc(100vh - 20px);
    min-height: 300px;
    overflow: hidden;
    -webkit-perspective: 10px;
    perspective: 10px;
}

Question 3

Try using this!

.B1 {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.B1::-webkit-scrollbar { 
    display: none;
}

I can’t figure out why yours has a scrollbar, but this should fix it. You likely have conflicting styling, but I can’t find it.

Generally, this is the best-practice way to style/control scrollbars. Other methods may work, but this method prevents conflicting styling far more effectively.

Leave a Comment Cancel reply