5

私は次のような単純なデータグリッドを持っています:

<div class="uiGridContent">
    <table>
        <tbody id="page-1">
             <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
             </tr>
        </tbody>
    </table>
</div>

* uiGridContent div の上と下の div の別々のテーブルにヘッダーとフッターがあることに注意してください。この例では必要ありません。

var nextPage = 1, lastScrollTop = 0, st;

$('.uiGridContent').scroll(function(){

    var st = $(this).scrollTop();

    // We're scrolling down
    if (st > lastScrollTop){

        if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent')[0].scrollHeight && nextPage < 10) {

            $.ajax({
                url: '<?php echo $appurl; ?>?page=' + nextPage,
                success: function(data) {
                    nextPage = nextPage + 1;
                    var content = $(data).find('.uiGrid tbody').html();

                    $('.uiGridContent tbody').last().after('<tbody id="page-'+nextPage+'">'+content+'</tbody>');

                },
                error: function(data) {

                    alert(data);

                }
            });

        }

        lastScrollTop = st;


    // We're scrolling up
    } else {

        if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() ) {

            var pageToRemove = $('.uiGridContent tbody').last();

            if( pageToRemove.attr('id') != 'page-1') {
                pageToRemove.remove(); nextPage = nextPage - 1;

            } else {
                $('.uiGridContent').scrollTo(0,0);
            }

        }

        lastScrollTop = st;

    }

});

ユーザーがテーブルを下にスクロールすると、gridcontent div の最後の tbody の一番下に到達すると、次のページに読み込まれるという考えです。これはうまくいきます！

問題は、スクロールバックにあります。ユーザーが最後の tbody を超えて上にスクロールすると、残りの tbody (この場合はオリジナル) が 1 つだけになるまで再び削除されるようにする予定です。実際に何が起こるかというと、上にスクロールし始めるとすぐに、最初のものを除くすべてが削除されるか、時には上にスクロールできず、他のすべての tbody を削除せずにユーザーが一番上に移動します。

何か案は？問題はif文にあると思います：

if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() ) {

スクロールアップセクションの下。

4

1 に答える 1

2

ええ、その通りです。問題は、ifステートメントで使用されている条件です。

if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() )

.uiGridContentこれは、それに加えてscrollTop が最後の要素.innerHeight()の高さより大きいかどうかを尋ねています。tbodyこれは、スクロール可能なペインの下部が、最後のtbody要素が の上部に配置されている場合、その高さよりも下にあるかどうかを尋ねることに似てい.uiGridContentます。それはあなたが望むものではありません。

あなたが望むのは、スクロール可能なペインの下部が最後のtbody要素の上部の上にあるかどうかを尋ねることです。最後のものだけを気にするので、次を使用できます。

if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() <= ($this[0].scrollHeight - $('.uiGridContent tbody').last().height()) )

私がこの$( ... )デモで持っているように、あなたは本当にこれらの繰り返しの呼び出しをキャッシュしたいのですが:

http://jsfiddle.net/anmkU/3/

scrollBottomまた、a (コンテンツの下部と表示可能領域の下部との間の距離)のアイデアを、関係なく使用しているため、キャッシュすることをお勧めします。これは、おそらく読みやすさに役立ちます。

http://jsfiddle.net/anmkU/5/

于 2013-10-18T10:06:51.770 に答える