Описание тега infinite-scroll
Задний план:
В приложениях Web 1.0 часто используется разбиение на страницы, чтобы ограничить отображение браузером всех данных в наборе сразу. Разбиение на страницы позволяет отображать на странице подмножество данных, что уменьшает объем памяти и уменьшает время задержки, вызванное слишком большим количеством видимой разметки, отображаемой в DOM.
Разбиение на страницы включает в себя ссылки "следующий" и "предыдущий" в качестве элементов управления, которые пользователь использует для перемещения по данным. Этот метод упрощается либо за счет полной перезагрузки страницы, когда щелчок по следующей перезагружает страницу со следующим подмножеством данных, либо за счет AJAX, где приложение заменяет часть страницы следующим набором данных.
Некоторые плагины Infinite Scrolling, такие как Infinite Scrolling - A jQuery Plugin, просто расширяют этот тип разбивки на страницы, скрывая гиперссылки "prev" и "next" и автоматизируя процесс перехода по щелчку мыши путем отслеживания положения scrollTop, в то время как другие этого не делают.
Таким образом, для веб-сайтов и веб-приложений с существующей устаревшей техникой разбивки на страницы более желательным может быть плагин, расширяющий существующие функциональные возможности.
Пример техники бесконечной прокрутки:
Реальный пример техники бесконечной прокрутки можно найти здесь.
Плагины бесконечной прокрутки:
Ниже приведен список некоторых широко известных плагинов Infinite Scrolling:
12 плагинов jQuery Infinite Scrolling для навигации по контенту
Двусторонняя техника Бена Наделя с бесконечной прокруткой как вверх, так и вниз
Когда я должен использовать этот тег?
Вы должны использовать тег [infinite-scroll] в вопросах, в которых вы знаете или обоснованно полагаете методом проб и ошибок, что проблема, с которой вы столкнулись, связана с плагином бесконечной прокрутки или техникой бесконечной прокрутки.
Например, этот вопрос задает пользователь, у которого возникли проблемы с работой плагина jQuery Infinite Scroll. Ошибка, которую видит пользователь, появляется только тогда, когда плагин загружен, что означает, что плагин вовлечен в проблему.
Помечать вопрос тегом, который конкретно не связан с проблемой, бесполезно, поэтому примером ситуации, в которой я бы не стал использовать этот тег, было бы, если бы плагин или метод Infinite Scroll работали отлично, но у меня проблемы с вызовом сервера AJAX. Кроме того, проблема возникает с плагином или без него; поэтому я бы не стал использовать этот тег в этом конкретном сценарии.
Продвинутые методы:
Большинство существующих плагинов Infinite Scroll, как правило, предлагают только функцию односторонней прокрутки. Другими словами, когда пользователь прокручивает страницу вниз, добавляется больше контента. Однако в большинстве случаев содержимое над видимой областью просмотра остается активно загруженным в DOM.
По мере того, как пользователи прокручивают страницу достаточно долго, они могут начать испытывать задержку, поскольку браузер потребляет все больше и больше памяти. При наличии достаточного количества контента это теоретически могло вызвать сбой браузера.
Бен Надел пишет в блоге сообщение о двунаправленной бесконечной прокрутке. Хотя демонстрации нет, в сообщение в блоге он включает видео, демонстрирующее эту технику.
Для двунаправленной прокрутки в настоящее время не существует подключаемого модуля, по крайней мере, такого, который легко найти. Двунаправленный метод реализовать намного сложнее, чем односторонний.
Сложность возникает не из-за реализации двух направлений как таковых, но вместо этого трудность проявляется при попытке реализовать прокрутку, которая загружает контент над видимой областью, например, когда пользователь прокручивает вверх. При прокрутке вниз новое содержимое, добавленное на страницу, не влияет на видимую область просмотра. Хотя пользователи могут видеть перемещение полосы прокрутки, само содержимое не изменяется.
Но когда контент загружается сверху, видимая область прокрутки смещается, и пользователь испытывает резкий эффект. Техника Бена Наделя включает в себя сохранение позиции scrollTop перед загрузкой нового контента сверху, а затем, когда контент загружается, новый scrollTop быстро вычисляется до того, как пользователь испытает какие-либо побочные эффекты.