Я пытаюсь настроить бесконечную прокрутку на сайте, который я разрабатываю с помощью Coldfusion, я новичок в javascript и jquery, поэтому у меня возникают некоторые проблемы, обворачивающие все это. Нужно ли иметь разбиение на страницы на моем сайте, чтобы использовать плагин с бесконечным прокруткой, или есть способ сделать это без него?
Плагин с бесконечным прокруткой jquery
Ответ 1
Для этого вам не нужен бесконечный плагин прокрутки. Чтобы определить, когда прокрутка достигает конца страницы, с помощью jQuery вы можете сделать
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
Демо на JsFiddle
Ответ 2
Я использую Hussein ответ с запросами 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.
Ответ 3
Я построил на вершине Hussein небольшой пример здесь, чтобы создать виджет jQuery. Он поддерживает localStorage для временного сохранения добавленных результатов и имеет функцию паузы, чтобы остановить добавление каждый так часто, требуя, чтобы щелчок продолжался.
Попробуйте:
Ответ 4
$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});
Кто-то попросил объяснений, так вот объяснение
here $(document).height() → - высота всего документа. В большинстве случаев это равно элементу текущего документа.
$(window).height() → высота окна (браузер) означает высоту того, что вы видите в браузере.
$(window).scrollTop() → Свойство Element.scrollTop получает или задает количество пикселей, которые содержимое элемента прокручивается вверх. Элемент scrollTop - это измерение расстояния вершины элемента до его самого верхнего видимого содержимого. Если содержимое элемента не генерирует вертикальную полосу прокрутки, то значение ее scrollTop по умолчанию равно 0.
$(document).height()<=$(window).scrollTop()+$(window).height()+100
добавить $(window).scrollTop() с помощью $(window).height() теперь проверить, равен ли результат вашей высоте вашего документа или нет. если он равен, значит, вы достигли конца. Мы добавляем 100 слишком, потому что я хочу проверить до 100 пикселей от нижней части документа (note <= in condition)
пожалуйста, поправьте меня, если я ошибаюсь
Ответ 5
Если у вас есть ссылка, например, ваш нижний колонтитул, вы можете использовать этот код, скажем, у вас есть нижний колонтитул с id #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 http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/
Ответ 6
Я написал эту функцию, используя идеи Hussein и Nick, но я хотел, чтобы она использовала promises для обратного вызова. Я также хотел, чтобы бесконечная область прокрутки находилась на фиксированном div, а не только на окне, если div отправлен в объект опций. Ниже приведен пример этого в моей второй ссылке ниже. Я предлагаю использовать библиотеку обещаний, например Q, если вы хотите поддерживать старые браузеры. Метод cb может быть или не быть обещанием, и он будет работать независимо.
Используется так:
HTML
<div id="feed"></div>
JS
var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});
Если вы хотите, чтобы фид временно остановился, вы можете вернуть false в методе cb. Полезно, если вы попали в конец фида. Его можно запустить снова, вызвав метод возвращаемого объекта infinScroll "setShouldLoad" и передав true и example, чтобы выполнить приведенный выше код.
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;
}
Ответ 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 */
}
});
});
Ответ 8
У меня была такая же проблема, но не нашла подходящего плагина для моей потребности. поэтому я написал следующий код. этот код добавляет шаблон в элемент, получая данные с помощью 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>