5

このコードはほぼ機能しますが、わずかな問題があり、あなたの助けを期待しています。

目標:このスクリプトのこの目標は、ユーザーがマウスを使用してホイールを回したときにparseScroll();関数を1回呼び出すことです。

問題:コードは最初は機能します。ただし、短い距離内でマウスを指で複数回ホイールすると、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