12

私は移行中の Web サイトに取り組んでおり、ユーザーのスクロール試行を移行のイニシエーターとして使用したいのですが、ウィンドウ スクロール バーを表示したくありません。

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

.scroll(function)

メソッドを使用してページを遷移させますが、ページをピクセル単位でオーバーフローさせずにユーザーのスクロール試行を検出して、スクロールバーを表示したいと考えています

これはどのように行うことができますか？

私が知っている乱雑なパッチの可能性:

外側のラッパー内にウィンドウを配置し、ラッパーのオーバーフローでスクロールバーを非表示にします。これは修正作業であり、解決策ではありません。すべてのブラウザーがスクロールバーに同じ幅を使用しているわけではないため、ページ コンテンツが中心からずれることになります。

4

3 に答える 3

12

TreeTree からの回答は、すべてのブラウザーをサポートする 1 つの関数に簡略化できます。jQuery は 1 つ以上のイベント パラメータをサポートしているため、mousewheel イベントと DOMMouseScroll イベントを組み合わせます。ただし、私のテストでは、最新の Firefox では on() が機能しないことが示されました。代わりに bind() を使用してください。var delta 宣言を組み合わせて、すべてのブラウザーをサポートすることもできます。

$('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');
    }
});
于 2014-11-10T16:36:00.243 に答える