0

次のコードがあります。

    <div id="main">
        <div id="first">
            First item
        </div>
        <div id="second">
            Second item
        </div>
        <div id="third">
            Third item
        </div>
    </div>

CSS スタイル:

    #first {
        background-color: yellow;
    }
    #second {
        background-color: blue;
    }
    #third {
        background-color: green;
    }
    html, body, #main, #first, #second, #third {
        height: 100%;
    }

メイン div には 3 つの div があり、ユーザーは画面の下部に移動するためにスクロールします。私は次のことをしたい: ユーザーが最初に「2 番目」の div に移動したときにマウスホイールでスクロールすると、2 回目は「3 番目」の div になります。この機能は次のサイトで実現されています: some site . 何かアドバイスをください。ありがとう。

4

1 に答える 1

0

リビングデモ: http://jsfiddle.net/xz2DN/1/

IE の更新: http://jsfiddle.net/xz2DN/6/

( IE のスクロールを不可能にするcss プロパティが含まれているためhtml、要素はスクロールされます)bodyoverflow:hidden

必要がある：

  • サイトのスクロール バーを無効にする
  • マウスホイール イベントを検出します (古いブラウザーでは機能しません)。
  • 上下にスクロールする前に、現在どのセクションにいるかを把握する
  • あるセクションから別のセクションに移動したら、そのステータスを更新します

このポイントのそれぞれを個別に探すことができ、それが機能するようになります:)

スクロールバーとデフォルトのスクロールを無効にする

body,html{
    overflow:hidden;
}

マウスホイールの検出:

自分がどのセクションにいるのかを知る

値のペアを持つ配列を作成することをお勧めしますid, status. は現在のセクションidのidタグであり、ステータスは現在の「スライド」/セクションであるかどうかを示します。

次のようなことができます。

var sections = {};
var numberSections = 0;
$('.section').each(function(index, element){
    //current slide is active
    if(!index){
        sections[$(this).attr('id')] = 1;   
    }
    else{
        sections[$(this).attr('id')] = 0;
    }
    numberSections++;
});

次に、2 つの関数を定義する必要があります。1 つはユーザーが上にスクロールしたときに配列のステータスを更新するためのもので、もう 1 つはユーザーが下にスクロールした場合のためのものです。

于 2013-08-28T16:19:24.660 に答える