jQuery/JavaScriptを使用してタッチパッドスクロールを検出する方法

Question

私はウェブページを構築しています。それは単一のページのように見えますが、セクションを扱っています。ボタンコントロールをクリックすると、すべてのセクションが隠れていて、画面上の特定のセクションが表示されます。 マウスパッドを上下にスクロールして同じコントロールを行うことはできますか？Googleでチェックしたところ、適切な解決策が得られませんでした。 この質問が既に投稿されている場合は、私に参考リンクを提供してください。スクロールイベントは、非常に頻繁に使用すると、ハードブラウザの仕事を作る何かをするので、もし、あなたがすべきトリガーされることを

が

$("#target").scroll(function(event) { 
    console.log("scroll event received:", event); 
}); 

注：

Answer 1

あなたはこのように、ユーザーのスクロールに対応するためにscroll eventを使用することができますイベントを抑制するよう注意してください。つまり、コードがxミリ秒ごとに実行されるようにしてください。

スクロールが停止した後にのみコードを実行する場合は、I have this fiddle for you。この例では

function checkf(predf, callback, ms) { 
    window.setTimeout(function() { 
     if (predf()) { 
      callback(); 
      return; 
     } 
     checkf(predf, callback, ms); 
    }, ms); 
} 

function afterScrollStops(func) { 
    var ms = 100, // interval to perform the scroll position check 
     oldX = $(document).scrollLeft(), 
     oldY = $(document).scrollTop(); 

    function startf() { 
     $(document).one("scroll", function() { 
      checkf(function() { 
       var newX = $(document).scrollLeft(), 
        newY = $(document).scrollTop(), 
        stoppedScrolling = newX === oldX && newY === oldY; 

       oldX = newX; 
       oldY = newY; 

       return stoppedScrolling; 
      }, function() { 
       func(); 
       startf(); 
      }, ms); 
     }); 
    } 

    startf(); 
} 

afterScrollStops(function() { 
    console.log("user stopped scrolling"); 
}); 

、コールバック関数は、ユーザがスクロールを停止した後機能を実行するafterScrollStopsに渡されます。