Question

我试图将此javascript事件更改为滚动而非鼠标滚轮。我试过改变

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

到

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

然后在这一行改变

var scrollVal = e.deltaY * 0.001;

到

var scrollVal = e.scrollTop * 0.001;

但它还没有奏效。这是完整的代码：

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(); 
    }
  }
}
});

Answer 1

滚动事件中没有scrollTop属性。您可以改用window.scrollY。见https://developer.mozilla.org/en-US/docs/Web/Events/scroll

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

示例：https://jsfiddle.net/ya34o8wz/

从＆＃39; wheel＆＃39;更改javascript addEventListener滚动＆＃39;

1 个答案: