2

さて、私がやろうとしているのは、幅と高さの 100% にまたがるパネルを含むページを作成することです。

<body>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
</body>

本文はoverflow:hiddenになります。私がやろうとしているのは、ユーザーが一定量スクロールするたびに、たとえばホイールをスワイプまたは半回転すると、次のパネルにスクロールすることです。ビューポートに次の要素を取り込むデッキのようなものです。

私がそれを処理した方法は次のとおりです。しかし、スクロール機能を100万回発生させないようにする方法がわかりません。

ここに私のJSがあります：醜い私はマウスホイールプラグインも使用しています..おそらく、xデルタ量ごとにスクロールアニメーションを起動することを考えていました。しかし、私はそれを達成する方法が本当にわかりません！

var scrollAmt = 0;
        $(window).on('mousewheel', function(event, deltaY){
            $('.projects').addClass('scrolled');
            if(event.originalEvent.wheelDelta > 0) {
                //down  
                    scrollAmt = scrollAmt -= $winHeight;
                    console.log(scrollAmt);
                    $('.projects').animate({marginTop: ''+ scrollAmt +'px'}, 2000);

            } else {
                if ($totalComputed === scrollAmt ){
                    console.log('last');
                } else {

                        scrollAmt = scrollAmt += $winHeight;
                        console.log(scrollAmt);
                        $('.projects').stop().animate({marginTop: '-'+ scrollAmt +'px'}, 2000);

                }
            }
        });

私はif文とelse文で何かをしようとしましたが、四角になってしまいます。

http://mirkoborsche.comのようなものを達成しようとしています

どんな助けでも大歓迎です！

一番、

4

2 に答える 2

1

このプラグインを使用して仕事を成し遂げることができると思います: https://github.com/alvarotrigo/fullPage.js。

また、更新も活発に行われているようです。リポジトリへの最後のコミットは 3 日前に行われました。

乾杯！

于 2013-10-14T08:25:38.240 に答える
0

スクロール イベントをアンバインドして再バインドし、スクロール イベントが特定の時間に発生しないようにします。

パターンは次のようなものです。

$(window).on('mousewheel', processMouse(event, deltaY);

function processMouse(event, deltaY){

    if(event.originalEvent.wheelDelta > 0) {
        // Unbind the mousewheel event
        $(window).off("mousewheel");
        // Do some things like scrolling the page to the next waypoint
    } else {
        // Rebind the mousewheel event
        $(window).on('mousewheel', processMouse(event, deltaY);
    }
}
于 2013-03-04T14:05:54.703 に答える