Что поменять чтобы ajax подгрузка работала от скроллинга?

Question

[Befref]

Есть код ajax подгрузки, работающий от нажатия на ссылку. Что поменять, чтобы подгружалось при достижении конца блока div?
То есть, как правильно прописать условие?

$('body').on('click', '[data-js-showmore-products="1"]', function(e){
				var url = $(this).attr('href');
				if (url.indexOf('?') == -1){
					url = url + '?m=1';
				} else {
					url = url + '&m=1';
				}
				catalogFilter.updateFilters({
					'url': url
				});
				e.preventDefault();
			});

Comments

[Леонид Князев]

Поменять событие и условие срабатывания. Очевидно же.

[Befref]

Леонид Князев, Да, неправильно спросил. Я не пойму, как условие правильно прописать. У меня подгрузка перестаёт вообще работать

Answer 1

[Никита Кит]

Ну я бы не делегировал click через body, а повесил непосредственно на [data-js-showmore-products="1"]. Потом берём высоту нужного div от топа - offset().top и сохраняем в переменную, задаём event $(window).scroll и в его колбэке чекаем когда низ окна $(window).height() + $(window).offset().top достигнет низа нужного div, сохранённого ранее. Если он равен (а лучше больше или равен - скролл довольно резкий ивент) то вешаем триггер на существующий click ($([data-js-showmore-products="1"]).trigger('click')). Таким образом кнопку Показать ещё можно оставить как фоллбэк для тех, у кого вдруг чё не заработает.
Всё это, естественно оформляем ниже уже написанного клика чтоб триггер увидел event на [data-js-showmore-products="1"]

UPD или даже ещё круче - советуемый мной способ завернуть в отдельную функцию и вызывать если юзер сам захочет бесконечный скролл. То есть добавить в интерфейс чекбокс типа "активировать бесконечную прокрутку" и повесить на него ивент с этой функцией

Answer 2

[KazeZlat]

1. Поменять $('body').on('click') на $('html, body').on('scroll')
2. URL запроса запрятать вместо ссылки в какой-нибудь data-аттрибут на элементе с id. Например на контейнере того, что вы подгружаете.
3. Добавить условие, чтобы callback выполнялся только при подходе к нижней границе контента. Тут есть несколько вариантов, сравнивать позицию нижней границу окна с позицией конца страницы, или определить элемент, при появлениии которого в поле зрения можно начинать подгрузку.
4. Не забывайте, что до окончания подгрузки вам желательно больше не отправлять ajax-запросов, поэтому можно добавить флаг, который перед ajax будет устанавливаться в значение true, а на 'complete-событии ajax-а снова сбрасываться в false