This is my first post in this community. I am about to loose my mind over trying to crack an issue that has something to do with the combination of the ScrollReveal.js code and a parallax that I've built in on the same page.
My problem: In the header section of my page I have a complex parallax with a city view in several layers that gives you the impression of depth while you are scrolling down the page. The content div then comes into view covering the parallax. I basically adapted the CSS from the CodePen by Sam Beckham:
https://codepen.io/samdbeckham/pen/OPXPNp
The div-layer that he calls .parallax__cover is where I've put my content. Without that cover the parallax wouldn't work.
The markup structure looks like this:
<div class="parallax">
<div class="parallax__layer parallax__layer__0"></div>
<div class="parallax__layer parallax__layer__1"></div>
<div class="parallax__layer parallax__layer__2"></div>
<div class="parallax__layer parallax__layer__3"></div>
<div class="parallax__cover>
//page content goes here
</div>
</div>
So far so good. Everything is working fine. I now wanted to add the ScrollReveal.js code in order to make some of my elements within my content-div appear on scroll.
My problem: the elements I wanted to be appearing remained hidden. After a bit of googling I found out what the problem was: With the parent div being set to "overflow-x: hidden" the browser for some reason always outputs 0 as the scrollTop value. Therefore, the ScrollReveal code has no chance to work properly. Yet, I need the "overflow: hidden" property so that my parallax doesn't get distorted.
What I tried so far:
I've taken my page-content out of the parallax div. I've then set the parallax div to position: relative with absolute positioned layers inside of it. And the page-content div then was set to position: relative as well. Result: The ScrollReveal worked. But my parallax didn't because it was missing the parallax__cover.
<div class="parallax">
<div class="parallax__layer parallax__layer__0"></div>
<div class="parallax__layer parallax__layer__1"></div>
<div class="parallax__layer parallax__layer__2"></div>
<div class="parallax__layer parallax__layer__3"></div>
</div>
<div class="page-content>
//page content goes here
</div>
I've wrapped only the parallax div (not the page-content) inside a wrapper that was given an overflow: hidden (instead of the parallax div). The problem remained.
I've added an empty absolute positioned parallax__cover inside the parallax div with a height of 1000px (also tried 100vh). The page-content-div remained outside the parallax div with position:relative. The parallax was working. And so was the ScrollReveal. My problem then: No matter how I positioned my content I was never able to position it directly above the parallax__cover div. My page content either snapped to the page top, covering the parallax. Or I've had this 1000px (or 100vh) high section in-between my parallax and the page-content.
I am really stuck here and have no more ideas what to do to basically get the browser to output the scrollTop value and to get the ScrollReveal to work again …
If someone has an idea how to crack that nut, I'd be more than grateful. Thanks a lot!
Moritz
After several sleepless nights I have found the answer: The scrollTop value isn't put out when overflow is set to hidden. There is no workaround. So what I've done was to restructure my Parallax, realizing it through the background.image property alone. Not through my HTML. Only through the CSS. With JavaScript I then "animated" those background images with different speeds … And since there is no overflow "hidden" needed with background images, ScrollReveal is now working just fine …