0

ここでの最初の質問、うまくいけばあなたたちは助けることができます!私はコーダーよりもはるかに芸術家なので、ここで完全に負けました。

それで!私がやりたいのはこれです。

500%の高さの単一のdivを持つページを設定しています。すべて20%の高さの5つのdivが含まれているため、どの画面にもぴったりのサイズの5つのdivが得られます。jFiddleの例を次に示します:(http://jsfiddle.net/NwUvV/3/)

しかし。

必要なのは、ユーザーがスクロールするときにマウスホイールが各divまで完全にスクロールすることです。のように、ユーザーがマウスホイールをスクロールすると、ページがdiv#2に移動します(アンカーまたはIDなど)。私が望んでいないのは、人々がdiv1の半分とdiv2の半分を画面に表示できるようにすることです。それは醜いです。

これは、次のサイトの例です:http ://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=Beo %2B%3A%2BAll#at-a-glance

マウスホイールを使用して、次のdivに完全に移動する方法をご覧ください。アンカーにロックされてスムーズにスクロールしているように見えますね。

あなたたちが助けることができるチャンスはありますか?

よろしくお願いします!

ジェフ

4

3 に答える 3

1

あなたがこれを理解したかどうかはわかりませんが、私はそこに例を投げると思いました...

最終的には、スクロール イベントをインターセプトして、ユーザーがスクロールしている方向を判断する必要があります。

どちらの方向かがわかれば、アクティブなインデックスの格納された変数を使用して、アクティブな要素のオフセットに基づいてボディをアニメーション化できます。

// setup active index variable
var index = 0;
//  we will use this to determine scroll direction
var lastTop = 0;

$( window ).on( 'scroll', function( ev ) {
    // get the current top offset
    top = $( window ).scrollTop();
    // Determine direction
    if ( top > lastTop ) { 
        // down
        index++
        // handle animation
    } else {
        // up
        index--
        // handle animation
    }
    // update lastTop for next interaction
    lastTop = top;

}

何が起こっているのかを理解するためにコード自体に十分なコメントを付ける必要がありますが、さらに支援が必要な場合や質問がある場合はお知らせください。

ここで完全な例を参照してください http://jsfiddle.net/NwUvV/71/

トランジション(おそらくフォールバック付きのcss3)などを支援するためにいくつかのクリーンアップを使用できますが、うまくいけばそれが要点を理解し、そこからそれを取ることができます.

含まれるコードは可変サイズの要素を考慮します。必要に応じて CSS のコメントを確認してください。

于 2013-12-31T16:37:21.093 に答える
1

ほら、行くぞ!ここで例を確認してください。

var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;


function scrollIt() {

$(window).off('scroll', scrollIt);

    currentScrollTop = $(window).scrollTop();


    if (tempScrollTop < currentScrollTop) {
       newHeight = newHeight + scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 

    } else if (tempScrollTop > currentScrollTop){
       newHeight = newHeight - scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 
    }


}

$(window).on('scroll', scrollIt);
于 2012-11-25T19:43:38.887 に答える
0

jQuery のマウスホイール プラグインを使用すると、スクロールの方向を検出し、スクロールの開始時に変数を設定して false を返すことができます。スクロールが終了したら、独自のアニメーションをトリガーして、検出されたスクロール イベントの方向にウィンドウをスクロールできます。

上記の例でバージョンを作成できるように、VIDesignz から要求されたようにフィドルをセットアップできますか?

于 2012-11-25T18:17:46.437 に答える