5

这段代码几乎可以工作，但有一个小问题，我希望能得到你的帮助。

目标：此脚本的目标是在用户使用鼠标滚轮时调用该函数parseScroll();。

问题：代码最初有效。但是，如果您在短时间内用手指在鼠标上多次滚动，parseScroll();则不会调用该函数。它这样做是因为它没有意识到前一个轮子已经结束，因为有去抖动算法来防止函数被调用一千次。

（更新）：我发现这篇文章似乎解决了我正在寻找的内容。有人可以帮助我理解它并用纯 JavaScript 重新创建它吗？http://demos111.mootools.net/Mousewheel

旁注：这个问题是特定于 OS X 的，但如果 Windows 用户能告诉我它是否正在做它应该在 Windows 中做的事情，我将不胜感激，因为我没有 Windows 机器来测试它。

这是给我带来问题的脚本的副本。

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };

  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      parseScroll(e);
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  });

  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});
html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}
Please wheel on your mouse and open your web inspector console to see resulting behavior.

请在评论中提出问题并重新审视该问题，因为我可能会更改描述，因为我会找到更好的方法来描述问题。

我希望我的解决方案使用 JavaScript。

4

2 回答 2

6

如您所见，问题似乎在于去抖功能。您所做的就是更改毫秒间隔，这应该可以解决它。

注意：我去掉了 HTML 和 CSS 以减少混乱。我还稍微编辑了 JS 以使其更短 - 希望这不是问题！

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  var scrollTimer = false;
  window.addEventListener('wheel', function(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      //parseScroll here
      console.log(e.deltaY)
      if (e.deltaY > 0) {
        console.log('scrolled down')
      }
      if (e.deltaY < 0) {
        console.log('scrolled up')
      }
      scrollStatus.functionCall = true;
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 50); //set this millisecond to your liking
  });
});

于 2015-12-09T04:24:06.207 回答
1

编辑，更新

尝试将处理程序定义为命名函数，调用.removeEventListener后parseScroll调用 

window.addEventListener('load', function() {
  var scrollStatus = {
    wheeling: false,
    functionCall: false
  };
  
  function wheel(e) {
    scrollStatus.wheeling = true;
    if (!scrollStatus.functionCall) {
      scrollStatus.functionCall = true;
      parseScroll(e); 
      window.removeEventListener("wheel", wheel, false)      
    }
    window.clearInterval(scrollTimer);
    scrollTimer = window.setTimeout(function() {
      scrollStatus.wheeling = false;
      scrollStatus.functionCall = false;
    }, 500);
  }

  var scrollTimer = false;
  window.addEventListener('wheel', wheel, false);

  function parseScroll(e) {
    //console.log(scrollStatus.functionCall)
    console.log(e.deltaY)
    if (e.deltaY > 0) {
      console.log('scrolled down')
    }
    if (e.deltaY < 0) {
      console.log('scrolled up')
    }
  }
});
html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  color: #fff;
}
Please wheel on your mouse and open your web inspector console to see resulting behavior.

于 2015-12-09T04:29:45.437 回答