Start onscroll function when specific element is in viewport / not on topof the page - jsfiddle inside

问题

I made this parallax scrolling.

Using tweenmax library.

Right now scrolling is calculated for whole page, so by the time I reach parallax elements, they moved a lot, I need to start calculating scrolling only after parent #wrap comes to viewport.

HTML :

<div class="asd"></div>
<div id="wrap">
  <div class="scroll-parallax-1 a"></div>
  <div class="scroll-parallax-2 b"></div>
  <div class="scroll-parallax-3 c"></div>
  <div class="scroll-parallax-4 d"></div>
  <div class="scroll-parallax-5 e"></div>
</div>

Script :

document.onscroll = function(){
  console.log(0.8*scrollY);
  TweenMax.set(".scroll-parallax-1", {y: 0.1*-scrollY });
  TweenMax.set(".scroll-parallax-2", {y: 0.2*-scrollY });
  TweenMax.set(".scroll-parallax-3", {y: 0.4*-scrollY });
  TweenMax.set(".scroll-parallax-4", {y: 0.7*-scrollY });
  TweenMax.set(".scroll-parallax-5", {y: 1.2*-scrollY });
}

Full jsfiddle here

As you can see, by the time i #wrap comes to view, elements are already in the grey .asd div

Any ideas?

来源：https://stackoverflow.com/questions/64134341/start-onscroll-function-when-specific-element-is-in-viewport-not-on-topof-the