JQuery плагин с бесконечной прокруткой

Question

Я пытаюсь настроить бесконечную прокрутку на сайте, который я разрабатываю с Coldfusion, я новичок в javascript и jquery, поэтому у меня возникли некоторые проблемы, связанные с этим.Нужно ли иметь пагинацию на моем сайте, чтобы использовать плагин бесконечной прокрутки, или есть ли способ сделать это без него?

Answer 1

Для этого вам не нужен плагин с бесконечной прокруткой. Чтобы определить, когда прокрутка достигает конца страницы, с помощью jQuery вы можете сделать

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

Демо на JsFiddle

Answer 2

Я использую ответ Хуссейна с запросами AJAX. Я изменил код так, чтобы он запускался с 300px вместо 10px, но он начал вызывать умножение моих добавлений до того, как был завершен запрос AJAX, поскольку вызов прокрутки срабатывает намного чаще в диапазоне 300px, чем в диапазоне 10px.

Чтобы исправить это, я добавил триггер, который будет срабатывать при успешной загрузке AJAX. Мой код выглядит примерно так:

var scrollLoad = true;

$(window).scroll(function () { 
  if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    scrollLoad = false;
    //Add something at the end of the page
  }
});

затем в своем ответе AJAX я установил scrollLoad на true.

Answer 3

Я создал небольшой пример Хусейна для создания виджета jQuery.Он поддерживает localStorage для временного сохранения добавленных результатов и имеет функцию паузы для периодического прекращения добавления, для продолжения требуется щелчок.

Попробуйте:

http://www.hawkee.com/snippet/9445/

Answer 4

Если у вас есть какая-то ссылка, например, ваш нижний колонтитул, вы можете использовать этот код, скажем, у вас есть div нижнего колонтитула с идентификатором #footer:

function element_in_scroll(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).scroll(function(e){
    if (element_in_scroll("#footer")) {
        //Here you must do what you need to achieve the infinite scroll effect...
    };
});

Также, если вы хотите получить больше информации, проверьте это каксоздать бесконечный свиток на jquery manual http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 5

$(function(){ 
    $(window).scroll(function(){
           if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
               alert('end of page');
           }
       });
});

Кто-то попросил объяснения, поэтому вот объяснение

здесь $ (document) .height () -> - высота всего документа. В большинстве случаев это равноэлемент текущего документа.

$ (окно) .height () -> высота окна (браузер) означает высоту всего, что вы видите в браузере.

$(window) .scrollTop () -> Свойство Element.scrollTop получает или задает количество пикселей, на которое содержимое элемента прокручивается вверх.Элемент scrollTop - это измерение расстояния от вершины элемента до его самого видимого содержимого.Когда содержимое элемента не генерирует вертикальную полосу прокрутки, тогда его значение scrollTop по умолчанию равно 0.

$(document).height()<=$(window).scrollTop()+$(window).height()+100

add $ (window) .scrollTop () с $ (window) .height () теперь проверяет, является лирезультат равен вашей высоте документа или нет.если оно равно, значит, вы достигли конца. мы добавляем также 100, потому что я хочу проверить до 100 пикселей снизу документа (примечание <= в состоянии) </p>

исправьте меня, если я ошибаюсь

Answer 6

У меня была такая же проблема, но я не нашел подходящий плагин для своих нужд.поэтому я написал следующий код.этот код добавляет шаблон к элементу, получая данные с помощью ajax и нумерации страниц.для определения того, когда пользователь прокручивает до нижней части div, я использовал это условие:

var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();

if (dh - (wh + ws) < dh - (h + t)) {
    //now you are at bottom of #infiniteContent element
}

$(document).ready(function(){
	$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
        appendTemplate(jsonre,1);
    });
});

function appendTemplate(jsonre, pageNumber){
	//instead of this code you can use a templating plugin like "Mustache"
	for(var i =0; i<jsonre.length; i++){
  	$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
  }

  if (jsonre.length) {
    $("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
    $(window).on("scroll", initScroll);
    
    //scroll event will not trigger if window size is greater than or equal to document size
    var dh = $(document).height() , wh = $(window).height();
    if(wh>=dh){
    	initScroll();
    }
  }
  else {
    $("#infiniteContent").attr("data-page", "");
  }
}

function initScroll() {
    var t = $("#infiniteContent").offset().top;
    var h = $("#infiniteContent").height();
    var ws = $(window).scrollTop();
    var dh = $(document).height();
    var wh = $(window).height();

    if (dh - (wh + ws) < dh - (h + t)) {
        $(window).off('scroll');
        var p = $("#infiniteContent").attr("data-page");
        if (p) {
            $.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
                appendTemplate(jsonre, p);
            });
        }
    }
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>

Answer 7

Если у вас есть прокручиваемый элемент, например, div с переполнением прокрутки, но нет прокручиваемого документа / страницы, вы можете воспользоваться этим способом.

       $(function () {
            var s = $(".your-scrollable-element");
            var list = $("#your-table-list");

            /* On element scroll */
            s.scroll(function () {
                /* The scroll top plus element height equals to table height */
                if ((s.scrollTop() + s.height()) == list.height()) {
                    /* you code */
                }
            });
        });

Answer 8

Я написал эту функцию, используя идеи Хусейна и Ника, но я хотел, чтобы она использовала обещания для обратного вызова.Я также хотел, чтобы область бесконечной прокрутки находилась на фиксированном элементе div, а не только в окне, если элемент div отправлялся в объект параметров.Пример этого есть во второй ссылке ниже.Я предлагаю использовать библиотеку обещаний, например Q , если вы хотите поддерживать старые браузеры.Метод cb может быть или не быть обещанием, и он будет работать независимо.

Он используется так:

html

<div id="feed"></div>

js

var infScroll = infiniteScroll({
    cb: function () {
        return doSomethingPossiblyAnAJAXPromise();     
    }
});

Если вы хотите, чтобы подача временно прекращалась, вы можете вернуть false в методе cb.Полезно, если вы достигли конца канала.Его можно запустить снова, вызвав метод возвращенного объекта infiniteScroll 'setShouldLoad' и передав true и пример, чтобы следовать приведенному выше коду.

infScroll.setShouldLoad(true);

Функция для бесконечной прокрутки это

function infiniteScroll (options) {
    // these options can be overwritten by the sent in options
    var defaultOptions = {
        binder: $(window), // parent scrollable element
        loadSpot: 300, //
        feedContainer: $("#feed"), // container
        cb: function () { },
    }

    options = $.extend(defaultOptions, options);
    options.shouldLoad = true;

    var returnedOptions = {
        setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
    };

    function scrollHandler () { 
        var scrollTop = options.binder.scrollTop();
        var height = options.binder[0].innerHeight || options.binder.height();
        if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
            options.shouldLoad = false;
            if(typeof options.cb === "function") {
                new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
                    if(typeof isNotFinished === "boolean") {
                        options.shouldLoad = isNotFinished;
                    }
                });
            }
        }
    }

    options.binder.scroll(scrollHandler);

    scrollHandler();

    return returnedOptions;

}

1 пример подачи с окном в качестве скроллера

2 пример подачи с подачей в качестве скроллера