Html Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search