Создание бесконечного прокрутки из жестко закодированного содержимого

Question

Я пытаюсь сделать бесконечный (ну полубесконечный) свиток, который питается от жестко закодированных div (потому что я еще не знаю каких-либо серверных языков) , Мое исследование привлекло тонну огромного jQuery для бесконечных свитков, но все они предназначены для использования с базой данных, а не с жестко закодированным контентом.

То, что я пытаюсь достичь, в конечном счете, является бесконечным прокруткой, которая начинается с загрузки X div в DOM, и когда пользователь достигает нижней части страницы, загружает X больше div и повторяет до тех пор, пока больше не будет divs оставляются для загрузки.

Знаете ли вы о каких-либо хороших или соответствующих сценариях или любых скриптах, которые могут мне помочь? Часть моей проблемы заключается в том, что я все еще нахожусь в этой кривой обучения JS; Я часто понимаю, что происходит, когда я смотрю на скрипт, но мне все еще трудно писать свои собственные с нуля.

Любая помощь или направление приветствуются. Заранее спасибо!!

Answer 1

на основе кода здесь: Alert using Jquery when Scroll to end of Page

Создать новый <div> элемент, когда вы достигнете нижней части страницы

$(window).scroll(function() { 
    if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight) 
    { 
     $('body').append('<div></div>'); 
    } 
}); 

Answer 2

Ваш HTML должен быть где-то хранить, и если у вас есть достаточно, чтобы подумайте о бесконечной прокрутке, вы, вероятно, не хотите загружать все с первоначальным запросом, поэтому, скажем, каждая «почта» хранится в отдельном файле HTML на вашем сервере: /posts/1.html. И вы хотите добавить их в div в свой основной документ: <div id="posts"></div>.

Вам нужен способ, чтобы загрузить данную запись и добавьте его в DIV:

function loadPost (id) { 
    $.get('/posts/'+id+'.html').done(function (html) { 
    $('#posts').append(html); 
    }); 
} 

Теперь вам нужен способ, чтобы вызвать loadPost() при прокрутке в нижней части страницы. В этом примере используется jQuery Waypoints для вызова функции обработчика, когда в нижней части DIV появляется в поле зрения:

var currentPost = 1; 

$('#posts').waypoint({ 
    offset: 'bottom-in-view', 
    handler: function() { 
    loadPost(currentPost++); 
    } 
});