如何让无限滚动工作？ [英] How to get infinite scroll to work?

问题描述

我正在尝试让这个无限加载脚本在我的项目中运行。

这是我的HTML：

 <！ -  Contents  - > 
< div id =page-container> 
< div id =scroller> 
< div id =page_1class =pagina>< / div> 
< div id =page_2class =pagina>< / div> 
< div id =page_3class =pagina>< / div> 
< div id =page_4class =pagina>< / div> 
< div id =page_5class =pagina>< / div> 
< div id =page_6class =pagina>< / div> 
< / div> 
< / div> 
 
< div id =pages-to-load> 
< div id =page_7class =pagina>< / div> 
 ... 
< div id =page_25class =pagina>< / div> 
< / div> 
  

这是脚本：

  function scrollalert（）{
 var pages = document.getElementById（scroller）。getElementsByTagName（div）; 
 var currentPageId = pages [pages.length  -  1]; 
 //console.log(\"currentPageId is：+ currentPageId）; 
 var scrollbox = document.querySelector（'＃page-container'）; 
 var scrolltop = $（window）.scrollTop（）; 
 var scrollheight = scrollbox.scrollHeight; 
 var windowheight = $（window）.height（）; 
 var scrolloffset = 20; 
 console.log（scrolltop）; 
 console.log（scrollheight）; 
 console.log（windowheight）; 
 console.log（scrollheight-（windowheight + scrolloffset））; 
 if（scrolltop> =（scrollheight-（windowheight + scrolloffset）））{
 //获取新项目
 console.log（加载更多页面）; 
 
（function（）{
 alert（'test'）; 
 var i; 
 var pagesToLoad = $（＃pages-to-load> div ）.size（）; 
 for（i = 0; i< pagesToLoad; i ++）{
 console.log（pagesToLoad [i] .id）; 
 $ .get（pagesToLoad [i] .id，function（newitems）{
 alert（'get new page'）; 
 $（'＃scroller'）。append（newitems）; 
 updatestatus（）; 
}）
}; 
}）（）; 
}; 
} 
  

无论我尝试什么，我似乎无法加载和追加我的新页面。向下滚动时，我的scrollTop和scrollHeight也不会改变。我确定我在这里遗漏了一些明显的东西。我的页面加载是未定义的吗？

解决方案

这是我使用JQuery的一个无限滚动脚本： / p>

Html：

 < html> 
< head> 
< title> Scroll Troll Page< / title> 
< script src =http://code.jquery.com/jquery-2.0.3.min.js>< / script> 
< / head> 
< body> 
< div id =scrollbox> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< br /> 
< / div> 
< / body> 
  

 < script type =text / javascript> 
 $（窗口）.scroll（function（）{
 //  -  10 =滚动时距离页面底部的所需像素距离）
 if（$（window）.scrollTop（） > = $（document）.height（） -  $（window）.height（） -  10）{
 var box = $（＃scrollbox）; 
 //只需在此附加一些内容
 box.html（box.html（）+< br />< br />< br />< br /> < br />< br />< br />）; 
} 
}）; 
< / script> 
  

行：

  box.html（box.html +将内容放在此处展开​​）; 
  

您可以添加在滚动时到达页面底部时应添加到容器中的内容。

工作jsFiddle：

http://jsfiddle.net/MdrJ4/3/

I'm trying to get this infinite load script to work in my project.

Here's my HTML:

<!-- Contents -->
<div id="page-container">
  <div id="scroller">
    <div id="page_1" class="pagina"></div>
    <div id="page_2" class="pagina"></div>
    <div id="page_3" class="pagina"></div>
    <div id="page_4" class="pagina"></div>
    <div id="page_5" class="pagina"></div>
    <div id="page_6" class="pagina"></div>
  </div>
</div>

<div id="pages-to-load">
  <div id="page_7" class="pagina"></div>
  ...
  <div id="page_25" class="pagina"></div>
</div>

And here's the script:

function scrollalert(){
  var pages = document.getElementById("scroller").getElementsByTagName("div");
  var currentPageId = pages[pages.length - 1];
  //console.log("currentPageId is: "+currentPageId);
  var scrollbox = document.querySelector('#page-container');
  var scrolltop = $(window).scrollTop();
  var scrollheight = scrollbox.scrollHeight;
  var windowheight = $(window).height();
  var scrolloffset=20;
  console.log(scrolltop);
  console.log(scrollheight);
  console.log(windowheight);
  console.log(scrollheight-(windowheight+scrolloffset));
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //fetch new items
    console.log("loading more pages");

    (function() {
      alert('test');
      var i;
      var pagesToLoad = $("#pages-to-load > div").size();
      for (i = 0; i < pagesToLoad; i++) {
        console.log(pagesToLoad[i].id);
        $.get(pagesToLoad[i].id, function(newitems){
          alert('get new page');
          $('#scroller').append(newitems);
          updatestatus();
        })
      };
    })();
  };
}

Whatever I try, I can't seem to load and append my new pages. Also when scrolling down, my scrollTop and scrollHeight don't change. I'm sure I'm missing something obvious here. Also my pages-to-load is undefined?

解决方案

Here is one infinite-scroll script of mine using JQuery which works:

Html:

<html>
    <head>
    <title>Scroll Troll Page</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id="scrollbox">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</body>

<script type="text/javascript">
    $(window).scroll(function () {
        //- 10 = desired pixel distance from the bottom of the page while scrolling)
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#scrollbox");
    //Just append some content here
    box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
        }
});
</script>

in Line:

box.html(box.html + "Place content to expand here");

You can add the content that should be added to your container when reaching the bottom of the page while scrolling.

Working jsFiddle:

http://jsfiddle.net/MdrJ4/3/

这篇关于如何让无限滚动工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！