Kevin Powell - Community•8mo ago

Parallax scroll causes a white rectangle to appear in a weird position

In the Codepen below I was trying to recreate a no-js parallax effect, the parallax works, but two things I didn't understand how they were happening, The first one is once you start scrolling a white rectangle appears, I don't know what it is and couldn't find its element on the DOM, the second there is a white space that appears at the end of the page and I have no idea why? Does anyone have an explanation for this? https://codepen.io/taro-naza/pen/oNVPmjZ

Taro-Naza

CodePen

oNVPmjZ

...

1 Reply

EIO•8mo ago

@Taro This has something to do with overflows and the way 3d functions work. Pretty much, they work with overflows 🌚 You can see the effect by adding an overflow: hidden rule to the last section. The rectangle will go away, but the parallax effect will go with it. I haven't tried this, but what I think will work is to have the last section nested in another container, which has full height and the hidden overflow on it, but the section remains with the same style. So, your structure would be like:

<section />
<section />
...
<div style="overflow:hidden">
  <section /> <!-- Last section ->
</div>

<section />
<section />
...
<div style="overflow:hidden">
  <section /> <!-- Last section ->
</div>

Gaming

Programming

Parallax scroll causes a white rectangle to appear in a weird position