2

現在、ユーザーがページの一番下に到達するたびに、次のコードを使用して URL ハッシュを更新しています。

var new_page_value = 1;
$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        new_page_value += 1;
        window.location.hash = 'page-' + new_page_value;
    }
});

以下のコードでクラス「ページ」を使用して、ユーザーがdivのいずれかをスクロールしたときに同じことを行うにはどうすればよいですか? たとえば、ユーザーがスクロールして最初のページを表示すると、ハッシュは #page-1 に更新されますが、スクロールして 2 番目のページが表示されるとすぐに、ハッシュは #page-2 に更新される必要があります。最初にスクロールして戻ると、ハッシュは再び #page-1 に更新されます。基本的に、表示されている div に基づいてハッシュを更新する必要があります。

<div class="page" data-page-num="1"></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="page" data-page-num="2"></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="page" data-page-num="3"></div>
4

1 に答える 1

0

このコードは役に立つかもしれませんが、クライアント側では少し集中的かもしれません.

var new_page_value = 1;
$(window).scroll(function() {
    $(".page").each(function() {
        var position = $(this).position();
        if($(window).scrollTop() == position.top) {
            new_page_value += 1;
            window.location.hash = 'page-' + new_page_value;
        }
    });

    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        new_page_value += 1;
        window.location.hash = 'page-' + new_page_value;
    }
});
于 2012-04-08T00:30:53.893 に答える