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

Question

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

44 Views Asked by MailCarrier At 04 February 2024 at 23:08

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?

Original Q&A

There are 2 best solutions below

**Cybertine** · Answer 1 · 2024-02-05T01:11:31.773000

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.

**Stephen M Irving** · Answer 2 · 2024-02-05T04:21:47.440000

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

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

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in PARALLAX

Trending Questions

Popular # Hahtags

Popular Questions