Бесконечная прокрутка — как подгружается длинный список
Что такое бесконечная прокрутка
Бесконечная прокрутка — способ показывать длинный список порциями. Когда человек приближается к концу видимой части, сайт автоматически подгружает следующую порцию.
Представьте каталог из ста товаров. Сначала видны двадцать карточек. Вы листаете вниз и, не нажимая кнопку, получаете ещё двадцать. Так можно продолжать выбирать в одном списке. Название «бесконечная» описывает способ просмотра. Сами товары или записи могут закончиться.
У прокрутки есть несколько заметных состояний.
- Начало. Сайт показывает первую порцию без ожидания действия.
- Загрузка. При приближении к концу появляются новые карточки или признак ожидания.
- Конец. Если записей больше нет, список перестаёт расти и показывает понятное состояние.
Чем бесконечная прокрутка отличается от кнопки и страниц
Бесконечная прокрутка подгружает данные сама. Кнопка ждёт нажатия, а обычное разбиение списка даёт переход на отдельную страницу.
| Вариант | Что делает человек | Как меняется список |
|---|---|---|
| Бесконечная прокрутка | Листает вниз. | Новая порция добавляется автоматически. |
| «Показать ещё» | Нажимает кнопку в конце. | Новая порция добавляется после нажатия. |
| Страницы списка | Открывает следующую страницу. | Загружается отдельный адрес с другой порцией. |
Для ленты просмотра бесконечная прокрутка может быть удобной. Для каталога с конкретной задачей важно вернуться к найденному товару. Если после возврата из карточки список открывается с начала, человек теряет место. Проверка такого сценария помогает выбрать подходящий способ.
Как сделать бесконечную прокрутку доступной для поиска
Дайте каждой порции отдельный адрес и обычные ссылки на другие части списка. Поисковый робот может не пролистать интерфейс так, как это делает человек. Доступ к товарам должен работать через прямые адреса.
- Разбейте список на порции. Например, откройте вторую группу по отдельному URL.
- Сделайте переходы. Проверьте, что обычная ссылка ведёт к следующей порции.
- Откройте адрес напрямую. Убедитесь, что нужные карточки видны без предварительного прокручивания.
- Сверьте выборку. Проверьте, что товары не теряются и не повторяются из-за нестабильной сортировки.
Бесконечная прокрутка может дополнять такую структуру. Посетитель видит непрерывный список, а отдельные адреса дают способ открыть нужную порцию. Если поиск не видит нижние карточки, проверьте ссылки и ответ адреса прежде, чем менять оформление.
Как проверить бесконечную прокрутку
Проверьте три сценария. Один успешный просмотр не показывает, как интерфейс ведёт себя при возврате и слабом соединении.
- Долистайте до следующей порции. Убедитесь, что карточки появляются один раз и остаются доступными.
- Откройте товар и вернитесь. Проверьте, сохраняется ли место просмотра.
- Проверьте конец. Дойдите до последних записей и убедитесь, что видно завершение.
- Попробуйте клавиатуру. Проверьте, остаются ли достижимыми ссылки, кнопки и подвал.
Если прокрутка непрерывно отодвигает подвал, перенесите важные ссылки в доступное место или выберите другой способ показа. Если посетитель не видит ошибку загрузки, добавьте возможность повторить попытку. После изменения пройдите сценарий ещё раз на телефоне. Так видно, действительно ли бесконечная прокрутка помогает, а не усложняет поиск товара. Отдельно проверьте адрес при возврате. Если бесконечная прокрутка изменила URL по мере просмотра, скопируйте его и откройте в другом окне. Убедитесь, что можно попасть к той же части списка без длинной прокрутки с начала. Проверьте и ситуацию с обновлением страницы. Если выбранная порция пропадает, решите, как сохранять положение или как дать обычный переход. Полезно записать, какое устройство и какая карточка использовались в проверке. Тогда разработчик сможет повторить проблему и убедиться, что исправление работает.
Для большого списка заранее решите, где человек сможет применить фильтр и начать заново. При бесконечной прокрутке полезно проверить, сохраняется ли выбранный фильтр при подгрузке. Иначе новые карточки могут не соответствовать исходным условиям.