Pure CSS Parallax Inner Scrollbar Issue

Question

Like a lot of people I saw Keith Clark's pure css implementation of parallax (Keith Clark's Tutorial) and really liked it a lot.

When trying to implement it, I get an inner vertical scrollbar around the overflowed vertical parallax content (not expected), as well as the outer vertical scrollbar that pertains to the static content that extends outside the vertical overflow of the screen (expected). I was wanting only one vertical scrollbar that controls the entire page (parallax group plus static content). When scrolling up/down with this, the parallax effect can be seen in the parallax group as well as moving static content in and out of view.

What changes do I need to make?

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective: 1px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax_layer {
    position: absolute;
    transform-origin-x: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  height: 300px;
  background-color: black;
}

<div class="parallax">
  <div class="parallax_group">
    <div class="parallax_layer parallax_layer--back">
      <p>Back Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--base">
      <p>Base Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--deep">
      <p>Deep Layer</p>
    </div>
  </div>

</div>

<div class="static_content">

</div>

score 0 · Answer 1 · edited Jul 22 '17 at 23:05

0

Your Code :-

.parallax {

perspective: 1px;
perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

Just Remove The "perspective: 1px;"

.parallax {

perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

This will Remove the inner scroll bar

edited Jul 22 '17 at 23:05

Joe

4,877
5
30
51

answered Jul 22 '17 at 15:41

Omkar Mestry

31
2

Thanks for your response Omkar, but this breaks the effect, and does not remove the inner scrollbar. – John Stafford Jul 22 '17 at 16:39

score 0 · Answer 2 · answered Jul 22 '17 at 19:00

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective:3px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    
}

.parallax_layer {
    position: absolute;
    transform-origin-x: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  margin-top:90%;
  height: 300px;
  background-color: black;
}

<html>
<head>
   
<body>

<div class="parallax">
  <div class="parallax_group">
    <div class="parallax_layer parallax_layer--back">
      <p>Back Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--base">
      <p>Base Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--deep">
      <p>Deep Layer</p>
    </div>
  </div>

<div class="static_content">

</div>
</div>
   </body>
   </html>

I think i solved ur problem of "scrollbars". U can edit the top margin to reduce the white space.

Just like in Bold's answer, the .parallax div is wrapping the entire page. The .static_content div has now been included into this div, whereas it didn't in the original question. — Armadillo, Jun 27 '20 at 14:34

score 0 · Answer 3 · edited Dec 05 '17 at 12:09

0

I have been trying to solve the same problem. What worked for me was the following:

body, html {
  overflow: hidden;
}

* {
  margin:0;
  padding:0;
}

You can see this in Keith Clark's demo3 here. It works for me on Chrome and Firefox for Mac, not sure yet about other environments.

edited Dec 05 '17 at 12:09

Luuuud

4,206
2
25
34

answered Dec 05 '17 at 11:04

DCresti

1
1

score 0 · Answer 4 · edited Aug 04 '21 at 22:16

I had the same (or similar) issue. I was trying to create a single parallax div with some content in it, but a vertical scrollbar was appearing on the div in question.

I had my page set up like this:

<body>

    <div class="some-content">
        <h1>Honk</h1>
    </div>

    <div class="parallax">
        <div class="parallax__group">
            <div class="parallax__layer parallax__layer--base">
                <div>Base Layer</div>
            </div>
            <div class="parallax__layer parallax__layer--back">
                <div>Background Layer</div>
            </div>
        </div>
    </div>

    <div class="more-content">
        <h1>Bonk</h1>
    </div>

</body>

What I didn't realize is that in order for it to work, the '.parallax' div had to wrap around my entire page:

<body>
    <div class="parallax">

        <div class="some-content">
            <h1>Honk</h1>
        </div>

        <div class="parallax__group">
            <div class="parallax__layer parallax__layer--base">
                <div>Base Layer</div>
            </div>
            <div class="parallax__layer parallax__layer--back">
                <div>Background Layer</div>
            </div>
        </div>

        <div class="more-content">
            <h1>Bonk</h1>
        </div>

    </div>
</body>

This resolved the issue for me.

I also used Dylan Awalt-Conley's parallax tweak in order to resolve a slight offset in the background image for .parallax__layer--back

Hope this helps!

Pure CSS Parallax Inner Scrollbar Issue

4 Answers4