8

私はこの動作を作成しようとしています：ユーザーがマウスホイールをスクロールしたとき（またはを押したとき）↓</kbd>) the webpage is scrolled down by the height of the window.

私は次のコードになってしまいました：

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;
$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;
        preventScroll = false;
    }
});

しかし、これは私が期待するようには機能しません。スクロールイベントページでは、一番端（下または上）にスクロールされます。私は何が欠けていますか？

4

2 に答える 2

4

問題はscrollTop()、ウィンドウのスクロールイベント自体の中でスクロールイベントをトリガーするものを使用していることです。

つまり、基本的に、作成したコードでは、最初のスクロールイベントがトリガーされるとすぐに、変数がfalseに設定されていないscrollTop()ときに別のイベントがトリガーされるため、無限ループに陥ります。preventScroll

コードを機能させるには、次のようにpreventScroll変数をfalsesetTimeout関数内に設定する必要があります。

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;

$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;

        setTimeout(function(){ preventScroll = false; }, 0);
    }
});

preventScrollに設定する前に、いくつかの「遅延」を追加しfalseます。このように変数を呼び出すscrollTop() preventScrollと、引き続きtrueに設定されます。

これが機能するフィドルです：http：//jsfiddle.net/J6Fcm/（スクロールステップが期待どおりに機能するようにコードを少し変更しました）

于 2012-10-06T21:16:31.240 に答える
2

デフォルトのブラウザスクロール機能を上書きする簡単な方法はありません。これがあなたが望むことをする一つの方法です、しかしそれはマウスのスクロールホイールを管理するためにブランドンアーロンのjquery-mousewheelプラグインを必要とします：

$(function() {
    // Ugly hack to disable browser scrolling (downside: hides scrollbar!!!)
    $('html').css('overflow', 'hidden');

    // Get viewport height by which to scroll (up or down)
    var viewportHeight = $(window).height();

    // Recache viewport height on browser resize
    $(window).on('resize', function() {
        viewportHeight = $(window).height();
    });

    // Scroll on mousewheel
    $('html').on('mousewheel', function(event, delta, deltaX, deltaY) {
        // scroll down
        if (deltaY < 0)
            window.scrollBy(0, viewportHeight);
        // scroll up
        else
            window.scrollBy(0, -viewportHeight);
    });

    // Disable document keypress event
    // which would scroll the content even with "overlow: hidden"
    $(document).on('keypress', function(){
        return false;
    });

    // Scroll on arrow up/down keys
    $(document).on('keydown', function(event){
        // arrow down key
        if (event.which == 40)
            window.scrollBy(0, viewportHeight);
        // arrow up key
        if (event.which == 38)
            window.scrollBy(0, -viewportHeight);
    });
});

これがコードをデモするためのフィドルです。私のソリューションには醜い欠点が1つあることを除けば、すべてが非常にうまく機能します。ブラウザの$('html').css('overflow', 'hidden');スクロールバーを削除しています。

于 2012-10-06T20:27:18.660 に答える