window.onscroll not working with parallax effect

Question

I'm confused, I've been trying to use a onscroll function to get a value forscrollTop. In an onload function it worked and returned 0 to the console, but with onscroll I get nothing. Tried it in codepen (https://codepen.io/dillonbrannick/pen/LqvzeR) and the console returns exactly as it should, not sure why on my web page's the console isn't returning anything for the exact same function.

The function in question:

window.onscroll = function() {
    var y = document.documentElement.scrollTop;

    console.log(y);
};

As Tyler pointed out in the comments the problem is due to the parallax effect, so I've updated the question to reflect this. The parralax effect was built off of Keith Clark's Parallax code (https://keithclark.co.uk/articles/pure-css-parallax-websites).

window.onscroll = function() {
    var y = document.documentElement.scrollTop;

    console.log(y);
};

body{
height:100%;
  margin: 0px 0 0px 0;
	overflow:hidden;
}
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  transform-origin-x: 100%;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back_01 {
  transform: translateZ(-5px) scale(8);
}

.bg {
  position:relative;
  left:100px;
  top:200px;
height:100px;
width:100px;
background-color:red;
}
p {
  background-color:blue;
  height:250px;
  color:white;
}
.wrapper {
  position:relative;
	width:80%;
	max-width:960px;
	margin:0 auto 0 auto;
	height: auto;
	overflow:hidden;
}
.more{
  margin-top:200px;
    position:relative;
    
}

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back_01">
      <div class="bg"></div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="wrapper">
        <p>content</p>
        <p class="more">More</p>
      </div>
    </div>
  </div>
</body>

Thanks

If I had to guess, it has something to do with the implementation of the parallax; you're not actually scrolling the window, but rather a container (<body> or otherwise). If you scroll around and run your code in console at different points ( document.documentElement.scrollTop;), you'll notice the result is always 0 regardless of where you've scrolled to. — Tyler Roper
– Tyler Roper, Commented Feb 20, 2019 at 17:44
Confirming the above: When attaching the onscroll event to your <div class="paralax"> instead of the window element, the event fires as you're expecting. That said, the result is still 0 simply because you're getting the scrollTop of documentElement, which as explained, isn't actually scrolling at all. — Tyler Roper
– Tyler Roper, Commented Feb 20, 2019 at 17:50
And for the comment hattrick: Please note that, while I've hopefully helped you solve the issue, I haven't submitted an answer because this question is off-topic. It relies on external resources to provide any sort of answer, and the problem is not replicated in the question itself. If your website ever goes down or changes in the future, this question is useless to future readers. — Tyler Roper
– Tyler Roper, Commented Feb 20, 2019 at 17:52
Good idea. I believe something like that would certainly improve the question. You can use inline stack snippets (the button to the right of the Image button when editing your question) to include a full, runnable example in the question itself. — Tyler Roper
– Tyler Roper, Commented Feb 20, 2019 at 17:58
@TylerRoper okay I'll do that, I can tag you back once it's done and you can re-add your answer if you want, I saw it, and it worked perfectly, thanks! — dillonbrannick
– dillonbrannick, Commented Feb 20, 2019 at 18:01

Tyler Roper · Accepted Answer · 2019-02-20 19:26:01Z

Your page implements a container element (<div class="parallax">) that houses the contents. This element is the one that is scrolling up and down, not the window itself.

document.querySelector('.parallax').addEventListener('scroll', function() {
  console.log(this.scrollTop);
});

body{
height:100%;
  margin: 0px 0 0px 0;
	overflow:hidden;
}
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  transform-origin-x: 100%;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back_01 {
  transform: translateZ(-5px) scale(8);
}

.bg {
  position:relative;
  left:100px;
  top:200px;
height:100px;
width:100px;
background-color:red;
}
p {
  background-color:blue;
  height:250px;
  color:white;
}
.wrapper {
  position:relative;
	width:80%;
	max-width:960px;
	margin:0 auto 0 auto;
	height: auto;
	overflow:hidden;
}
.more{
  margin-top:200px;
    position:relative;
    
}

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back_01">
      <div class="bg"></div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="wrapper">
        <p>content</p>
        <p class="more">More</p>
      </div>
    </div>
  </div>
</body>

Drew R · Accepted Answer · 2023-09-29 22:19:58Z

https://github.com/pmndrs/react-spring/discussions/1333

Parallax needs a hack solution to track scroll position since it is internal data.

One page of Parallax scroll in @react-spring = 529.5 scrollTop

export const parallaxScrollToOffset = (scrollY: number): number => {
  return scrollY / 529.5;
};

export const useParallaxScroll = (): number => {
  const [scroll, setScroll] = React.useState(0);

  React.useEffect(() => {
    document
      .querySelector(".parallax")
      ?.addEventListener("scroll", function () {
        // @ts-ignore
        const { scrollTop } = this;
        setScroll(parallaxScrollToOffset(scrollTop));
      });
  }, []);

  return scroll;
};

In the App where you init the Parallax component you need to pass in a class name "parallax" so that the useScrollPosition can find it via the query selector.

const App = () => {
  return (
    <Parallax
      className="parallax" // this makes `useScrollPosition` work
      pages={10} // arbitrary number, doesn't matter
    >
     {/* whatever else you want in the app */}
    </Parallax>
  );
};

Collectives™ on Stack Overflow

window.onscroll not working with parallax effect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related