Как получить бесконечный свиток для работы?

Я пытаюсь заставить этот сценарий бесконечной загрузки работать в моем проекте.

Вот мой 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

Ответов: 3

3 принят

Вот один скрипт с бесконечной прокруткой, использующий 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
    }
};

полный пример в jsfiddle

JavaScript, JQuery, бесконечномерная прокрутка,
Похожие вопросы
Яндекс.Метрика