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

【问题标题】：how to load data while scrolling in div?如何在 div 中滚动时加载数据？
【发布时间】：2014-05-27 11:25:30
【问题描述】：

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

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--;
      }                                                     
   }    
   });
});

谢谢

【问题讨论】：

是否要求开始显示page_1，不显示page_2 - page_5，然后在scoll 时显示page_2 - page_5？谢谢
要求是一次显示两个页面，请检查我的小提琴并检查它..你会得到我想要的想法
@guest271314 请检查jsfiddle.net/N5LZB/28/.It 首先显示page_4 和page_5。我需要可见的div 概念。如果用户知道我在preRealTimeContents div 中，它会加载更多数据page_3。现在如果用户有page_3 和page_4 显示。并且滚动底部用户知道他是在 realTimeContents 中加载 page_5 和

标签： javascript jquery facebook

【解决方案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/

【讨论】：

这不是一个正确的答案..我必须一次显示两页
@user2484319 请查看更新后的帖子和 jsfiddle。附加的pages 的数量应该是可调整的。谢谢
我觉得你看不懂我的问题。我再解释一遍。
第一次用户运行他的小提琴它显示page_4，page_5在preRealTimeContents，preRealTimeContents竞争div。
现在如果用户滚动到底部，这意味着当用户在任何 div 中向下滚动时它什么也不做，因为我们只有五页。我们已经显示了最后一页（page_5）。但是当用户向上滚动时，它将加载页面 page_3 并从 dom 中卸载 page_5。