2

スムーズな全ページスクロールを実装する必要があります。私はすでにこのページでそれをしました：

http://superhostitel.cz/sluzby

しかし、ホイールでさらにスクロールすると、より多くのページがスクロールされます。1 ページだけスクロールするように設定するにはどうすればよいですか?

私のコード:

  $(document).ready(function () {
    var divs = $('.service');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 800);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});
4

2 に答える 2

1

ガードを使用してハンドラーが一度に複数回実行されるのを防ぎ、関数の実行を開始するときにフラグを立て、アニメーションが終了したらフラグをリセットします。

これらの行に沿った何かが機能するはずです（テストはしませんでしたが、アイデアは得られるはずです）：

var running = false;
var handler = function (e) {
    if (running) {
        return;
    }
    running = true;
    if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    // find currently visible div :
    div = -1;
    divs.each(function(i){
        if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
            div = i;
        }
    });
    if (dir == 'up' && div > 0) {
        div--;
    }
    if (dir == 'down' && div < divs.length) {
        div++;
    }
    //console.log(div, dir, divs.length);
    $('html,body').stop().animate(
        { scrollTop: divs.eq(div).offset().top }, // properties
        800,                                      // duration
        "swing",                                  // easing (needed to use 4th argument)
        function(){ running = false; }            // animation complete callback
    );

    return false;
};

$(document.body).on('DOMMouseScroll mousewheel', handler );
于 2016-02-03T17:23:53.297 に答える
0

別の方法でそれを行うことができます：

  1. 最大ページ (fe) 10 ページを定義します。
  2. 実際のページを 1 から選択できます (快適なコーディングのために 0 ではありません)。
  3. 通常のスクロールを無効にします。
  4. スクロールが呼び出され、宛先が最大ページを拡張せず、最小ページを縮小する場合 (#0 ページに入らない) - スクロール
  5. ウィンドウのサイズ変更を動的に検出します。

  6. 良い１日を。

  7. 特定の要素をスクロールしたい場合は、これをお勧めします

注: clientHeight と実際のページの乗算にユーザーを誘導するアニメーションには setInterval(f, 1000/60) を使用します。

于 2016-02-03T17:25:12.440 に答える