1

私はスクロールイベントをページ上の要素にバインドしようとしてきましたが、スクロール時にTwitterやFacebookのようなより多くのコンテンツをロードします。

HTML

<div id="main-content">
    <ul class="event-list big row" id="event-list">
    ...
    </ul>
</div>

CSS

#main-content {
    width: 984px;
    overflow: visible;
    margin: 0 auto;
    color: #101010;
    width: 974px;
    padding: 10px 0 7px 0;
}
#main-content .event-list.big {
   width: 1080px;
   padding: 0 0 20px 0;
}

JSコード

$('#event-list').scroll(function() {
    var curScroll = $(this)[0].scrollTop,
        maxScroll = $(this)[0].scrollHeight - $(this).height();

    console.log(curScroll, ' :: ', maxScroll);

    if ((curScroll >= maxScroll - 200) && !loading) {
        loading = true;

        $(this)[0].scrollTop = curScroll;

        $('.loading').fadeIn('fast');

        if (page <= $('.page').length) {
            loadMore();
        }
    }
});

スクロールしてもイベントはトリガーされscrollません。curScrollとmaxScrollも出力されません。

何が問題を引き起こす可能性がありますか、CSSスタイルが間違っているか、私のjsコードが間違っている可能性がありますか？

4

3 に答える 3

3

これは、スクロールイベントのトリガーで必要と思われるものの実際の例です。「overflow: scroll」を設定して、div をスクロール可能な領域として使用します。注: 最初の読み込み時にリストが十分に長い場合にのみ、スクロール イベントが発生します。(main-content の height プロパティを参照してください。ajax の読み込みはお任せします。:)

CSS

 #main-content {
    width: 984px;
    overflow: scroll;
    margin: 0 auto;
    color: #101010;
    width: 974px;
    height: 100px;
    padding: 10px 0 7px 0;
}
#main-content .event-list.big {
   width: 1080px;
   padding: 0 0 20px 0;
}

脚本

$(document).ready(function() {
            $('#main-content').scroll(function() {
              var curScroll = $(this)[0].scrollTop,
                  maxScroll = $(this)[0].scrollHeight - $(this).height();

              console.log(curScroll, ' :: ', maxScroll);

              if ((curScroll >= maxScroll - 200) && !loading) {
                  loading = true;

                  $(this)[0].scrollTop = curScroll;

                  $('.loading').fadeIn('fast');

                  if (page <= $('.page').length) {
                      loadMore();
                  }
              }
            });
        });

HTML

<div id="main-content">
    <ul class="eventlist big row" id="event-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
</div>
于 2013-01-15T13:48:53.667 に答える
3

http://api.jquery.com/scroll/を参照してください

スクロール イベントは、window、frame、iframe などの要素でのみトリガーされoverflow: (scroll|auto)、それらのコンテンツは使用可能な幅/高さより大きくなければなりません。だから私はあなたが追加することをお勧めします

#event-list {
    overflow: auto;
}

ユーザーが特定の要素にスクロールするタイミングをリッスンする場合は、ウィンドウのスクロール イベントをリッスンしてから、スクロール座標を確認する必要があります。

$(window).scroll(function() { /** ... **/ });
于 2013-01-15T13:21:47.403 に答える