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

Question

[Алекс]

Сталкивался кто-нибудь с библиотекой для создания подобного эффекта.
Поясню словами еще если лень бегать по ссылкам. При скроле новости она улетает наверх, а под ней уже есть другая. При этом адрес меняется при полном исчезновении текущей новости. Много где видел подобное и не хочется лепить свой велосипед из говна и палок если есть что-то готовое и рабочее.

Answer 1

[Anubis]

Адрес меняется - html5 history api или window.onhashchange.

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

Answer 2

[pcdesign]

https://infinite-scroll.com

Answer 3

[maksam07]

Если брать именно риа, то у них вот так:
Вот у них в хеадере:

var endlessScrollUrl = '/services/article/infinity/'; 
var endlessScrollQueue = [1553164000,1553132791,1553151765,1553155173,1552549127,1553153627,1553149279,1553139756,1553161978,1553160682,1553158086,1553142133,1553158279,1553136205,1553162392]; 
var endlessScrollLimit = [1552549127];

Вот скрипт в футере: https://cdn22.img.ria.ru/min/js/pages/article.js

Вот урл следующей новости: https://ria.ru/services/article/infinity/155316400...

Думаю дальше можно покопаться и сделать что-то похожее. Но у них много лишнего кода, подгрузку можно и по-проще сделать

Answer 4

[irishmann]

С библиотеками не сталкивался, вот ссылка как сделать на JQuery

Comments

[Алекс]

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

[Александр Аксентьев]

Алекс,

но время уйдет достаточно.

там же всего 6 шагов и готовый код, на что у вас время-то уйдет? На копировать-вставить?

[Антон]

Алекс, Это частный случай.Так или иначе, его нужно адаптировать под ваш сайт, вы вряд ли найдете что-то готовое.
Тут же просто ссылки на предыдущий-следующий объект, при достижении скроллом конца страницы, со следующего объекта дергается контент аяксом и вставляется в блок ниже, ну и, в теле функции success аякса отрабатывает history api.
Время уйдет, но будет свое, понятное и, в следующий раз, на реализацию такой штуки будет уходить куда меньше времени