如何让无限滚动工作？

问题描述 投票：5回答：4

我正试图让这个无限加载脚本在我的项目中工作。

这是我的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>

这是脚本：

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

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

javascript jquery infinite-scroll
4个回答
4
投票

这是我使用JQuery工作的一个无限滚动脚本：

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>

排队：

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

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

工作jsFiddle：

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

0
投票

我有一个问题，使用无休止的滚动，所以我写了一个库，解决了我的问题。我认为这个库可以帮助你解决这个问题。使用此库作为实现无限滚动的简单方法：

https://github.com/hamedtaheri32/infinite-scrolling

例如：

<script>
$(document).ready(function(){
    $(document).infiniteJscroll({
        offset:0,
        topOfPage:function(){
            console.log('Scrolled to Page Top');

        },
        bottomOfPage:function(){
            console.log('Scrolled to Page Bottom');
            addContent();
        },
        pageInit:function(){
           console.log('Initialize page');
            addContent();
        }
    });
});
//This method used for simulate loading data from server. replace it with AJAX loading method.
function addContent() {
    var c = '';
    for (var i = 0; i < 10; i++) {
        c += '<a class="box"></a>';
    }
    $("#post").append(c);
}

</script>

特征 ：

  • 检测页面顶部
  • 检测页面底部
  • 可以使用偏移量来检测页面底部
  • 有页面初始化方法
  • 与AJAX加载页面混合的能力
0
投票

可以使用下面的脚本

window.onscroll = function (ev) {
    let scrollHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );
    let currentScrollHeight = window.innerHeight + window.scrollY;

    if ((scrollHeight - currentScrollHeight) < 200) {
       // your statement
    }
};

full example in jsfiddle

0
投票

这就是我所做的:(如果我错了，请纠正我）

$(document).ready(() => {
  var page = 1;
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      page++;
      if (page == 2) {
        $('#div2').removeClass('hide');
      }
      if (page == 3) {
        $('#div3').removeClass('hide');
      }
      if (page == 4) {
        $('#div4').removeClass('hide');
        page = 1;
      }
    }
  });
});
.page {
  width: 100%;
  background-color: black;
  color: white;
  height: 100vh;
  border-top: 1px solid white;
}

.hide {
  display: none;
}

body {
  margin: 0px;
  padding: 0px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Infinite Scroll</title>
  <link href='css/bootstrap.css' ref='stylesheet'>
</head>

<body>

  <div id='div' class='page'>
    <h1>Page 1</h1>
  </div>
  <div id='div2' class="page hide">
    <h1>Page 2</h1>
  </div>
  <div id='div3' class="page hide">
    <h1>Page 3</h1>
  </div>
  <div id='div4' class="page hide">
    <h1>Page 4</h1>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src='js/popper.min.js'></script>
  <script src='js/bootstrap.min.js'></script>
  <script src='js/myjquery.js'></script>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.