4

ページを下にスクロールするときに、スクロールバーを要素の上部にスナップするための「最良の」アプローチを推奨できる人はいますか?

たとえば、私のレイアウトが次のようだったとします。

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

ユーザーがセクション 1 を表示していて、セクション 2 がブラウザーのビューポートの一部になり始めている状態でブラウジングを開始した場合、ブラウザーが次の div の先頭に自動的にスナップするようにしたいと思います。

私は .scroll() と .scrollTop に精通していますが、ここからどこへ行くべきか少しわかりません。

4

3 に答える 3

8

@Scott Dowdingによって作成されたこのisScrolledIntoView関数を使用して、要素がビューポートにあるかどうかを確認できます。

そして、ここに例があります、

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000)
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}​

デモ

于 2012-07-26T23:57:35.973 に答える
0

できることは決まっている

body {
overflow:hidden
}

ユーザーの操作を制御できます。ユーザーがメニューのセクションを選択した場合、scrollTop でアニメーション化してそのセクションにリダイレクトするメニューがあるとします。

別の解決策として、600px の高さが定義されているため、scrollTop で計算し、ユーザーがドキュメント内のどこにいるかを次のようにスクロールできます...

$(window).scroll(function () { 
      console.log($(window).scrollTop());
});​

例: http://jsfiddle.net/3STQN/

于 2012-07-27T00:00:19.090 に答える