JQuery/JS：ウィンドウのオーバーフローなしにスクロールするユーザーのスクロールの試行を検出

Question

私は移行中のWebサイトで作業していますが、移行開始者としてユーザーのスクロールを使用したいのですが、ウィンドウスクロールバー。今、私は単にjQueryの

で（これは私は避けるようにしようとしているものですが、私は、スクロールバーのユーザーの画面というのが私のウィンドウサイズ1pxの背の高い作りました）そのユーザーがスクロールを検出してい

.scroll(function) 

方法、および私のページを遷移させることを利用して、しかし私はピクセルで、私のページのオーバーフローを作るために持つため、スクロールバーを表示せず、ユーザのスクロールの試みを検出したい

どのようにこの終わり？

位置決め外側包装紙の内側窓とラッパーのオーバーフローにスクロールバーを隠す：私の知る

乱雑パッチ可能。これはパッチアップの仕事であり、解決策ではありません。すべてのブラウザがスクロールバーに同じ幅を使用しているわけではないため、ページコンテンツが中心から外れることになります。

Answer 1

これをご覧くださいquestion私は参考にこれを作るために使用したfiddle。

Works only in Firefox：

$('html').on ('DOMMouseScroll', function (e) { 
    var delta = e.originalEvent.detail; 

    if (delta < 0) { 
     $('p').text ('You scrolled up'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled down'); 
    } 

}); 

Works in Chrome, IE, Opera and Safari：

$('html').on ('mousewheel', function (e) { 
    var delta = e.originalEvent.wheelDelta; 

    if (delta < 0) { 
     $('p').text ('You scrolled down'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled up'); 
    } 
}); 

あなたはあなたの全体のブラウザ画面にまたがる要素にバインドする必要があると思います。

Answer 2

TreeTreeからの回答を、すべてのブラウザをサポートする1​​つの関数に単純化することができます。以降、マウスホイールとDOMMouseScrollイベントを結合します。しかし、私のテストでは、最新のFirefoxでは動作しませんでした（）。代わりにbind（）を使用してください。また、すべてのブラウザをサポートするためのvarデルタ宣言を組み合わせることができます。

$('html').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 

    if (delta < 0) { 
     console.log('You scrolled down'); 
    } else if (delta > 0) { 
     console.log('You scrolled up'); 
    } 
}); 

Answer 3

現代のソリューションは、wheelイベント（IE9 +）

$('selector').on('wheel', function(event) { 
    var delta = { 
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY 
    }; 

    if (delta.x != 0 || delta.y != 0) { 
    //user scrolled 
    } 
});