Question

今天我看到了我的Facebook帐户并滚动了竞争的底部。一段时间后，我发现它在滚动时加载了更多-2数据（滚动位置与之前相同）。我认为这是Facebook提供的新功能。以前他们首先进入底层并获得该事件，而不是加载数据示例pull来刷新。我们可以在滚动时加载新数据，以便查看同一页面中的所有数据吗？

http://jsfiddle.net/N5LZB/28/

$(document).ready(function(){
   $('#fullContainer').on('scroll', function () {
      if ($(this).scrollTop() === 0 ) {
         // alert('--')
         if(file_show_counter>0){
            var precontent=$("#preRealTimeContents").html();
            //$("#loadingImg").hide();
            $("#realTimeContents").html($("#preRealTimeContents").html() + '<div style="clear:both;"></div>');
            console.log("preRealTimeContents : " + $("#preRealTimeContents").height());
            //$("#preRealTimeContents").html('');
            $("#preRealTimeContents").html(pages[--file_show_counter]+ '<div style="clear:both;"></div>');
            $("#fullContainer").scrollTop(
               $("#preRealTimeContents").height()
            );
         }
      }
      else if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight ) {                                        if(++file_show_counter<count) {      
         //alert(file_show_counter);
         $("#preRealTimeContents").html($("#realTimeContents").html());
         $("#realTimeContents").html(pages[file_show_counter+1]+'<div style="clear:both;"></div>');
         $("#fullContainer").scrollTop(
            $("#preRealTimeContents").height()-  $("#fullContainer").height()              
         );
      }else {
         file_show_counter--;
      }                                                     
   }    
   });
});

由于

Answer 1

试试这个（模式）

CSS

#realTimeContents div {
    padding-top : 8px;
    padding-bottom : 8px;
}

js（已更新）

$(function () {

  var page_0 = "Shikhar Dhawan is an Indian international cricketer."; // `page_1`

  var page_1 = "Rohit Gurunath Sharma is an Indian international cricketer."; // `page_2`

  var page_2 = "Virat Kohli is an Indian cricketer."; // `page_3`

  var page_3 = "Suresh Raina is currently a player of Indian Cricket Team"; // `page_4`

  var page_4 = "Yuvraj Singh is an Indian international cricketer."; // `page_5`

  var pages = [page_0, page_1, page_2, page_3, page_4];

   $("#fullContainer")
   .find("#preRealTimeContents")
   .html("<div id=0>" + pages[0] + "</div>")
   .parent("#fullContainer")
   .one("scroll", function (e) {
      $.each(pages.slice(1, 5), function (k, v) {
        $("#realTimeContents")
        .append("<div id=" + (++k) + ">" + v + "</div>");
        // append `2` `pages`,
        // adjust for number
        // of `pages` to append
        // i.e.g., `0` - `4`
         return (k != 2)

      });
    });
});

jsfiddle http://jsfiddle.net/guest271314/h95h5/

如何在div中滚动时加载数据？

1 个答案: