Вопрос:

Change javascript addEventListener from 'wheel' to 'scroll'

javascript jquery addeventlistener

325 просмотра

1 ответ

14 Репутация автора

I'm trying to change this javascript event to happen on scroll rather than the mouse wheel. I've tried changing

window.addEventListener('wheel',function (e)

to

window.addEventListener('scroll',function (e)

and then on this line changing

var scrollVal = e.deltaY * 0.001;

to

var scrollVal = e.scrollTop * 0.001;

But it's still not working. This is the full code:

window.addEventListener('wheel',function (e) { 
if(!parallaxLocked){
  var scrollVal = e.deltaY * 0.001;

  introContentDist -= (scrollVal * (window.innerHeight * 0.2));
  mainContentDist -= (scrollVal * window.innerHeight);

  if(mainContentDist < window.innerHeight){
    if(mainContentDist > 0){
      var distanceCoveredPercentage = mainContentDist / window.innerHeight;
      TweenMax.to(introDiv, 0.1, {y: introContentDist+"px", opacity: 1 * distanceCoveredPercentage}); 
      TweenMax.to(belowFold, 0.1, {y: mainContentDist+"px"}); 
      window.scrollTo(0,0); 

      if(!firstSlideFadedUp){
        if(mainContentDist < window.innerHeight * 0.5){ // if parallaxed up 50%
          contentSections[0].className = 'airpoints-module -active'; // fade in first section
        }
      }

      if(!stickyLogosFadedUp){
        if(mainContentDist < window.innerHeight * 0.25){ // if parallaxed up 75%
          stickyLogo.className = 'c-sticky-logo fade-in'; // fade in sticky logo changer
          stickyLogosFadedUp = true;
        }
      }
    } else {
      // when scrolled to end, lock divs to final place
      TweenMax.to(introDiv, 0.1, {y: "-30%"+"px"}); 
      TweenMax.to(belowFold, 0.1, {y: "0%"});
      parallaxLocked = true;

      // now that everything is locked in place
      setupScrollLogoChanger(); 
    }
  }
}
});
Автор: Julz Источник Размещён: 08.11.2017 10:28

Ответы (1)


0 плюса

7836 Репутация автора

Решение

There is no scrollTop property on the scroll event. You can use window.scrollY instead. See https://developer.mozilla.org/en-US/docs/Web/Events/scroll

window.addEventListener('scroll', function (e) { 
    if(!parallaxLocked){
        var scrollVal = window.scrollY * 0.001;
        ...

Example: https://jsfiddle.net/ya34o8wz/

Автор: Sphinxxx Размещён: 08.11.2017 10:43
Вопросы из категории :
32x32