Бесконечная прокрутка часто используется в социальных сетях, таких как Twitter или Pinterest. Эта функция позволяет пользователям загружать некоторые изображения / контент на веб-сайт, а затем загружать еще раз, когда страница достигает конца.
Я использовал Unsplash API для получения случайных картинок. В этой статье основное внимание будет уделено тому, как использовать JavaScript, чтобы использовать некоторые свойства для достижения бесконечной прокрутки. Вы можете найти другие файлы проекта (файлы HTML или CSS) в этом репо.
Четыре свойства для получения бесконечной прокрутки
A) window.scrollY: насколько далеко документ был прокручен сверху.
Б) window.innerHeight: видимая часть окна.
В) document.body.offsetHeight: высота всего документа.
D) 1000 пикселей (или любое другое значение): расстояние от низа документа.
Схема ниже лучше иллюстрирует эти свойства:
Глядя на вышеизложенное, мы можем прослушать событие прокрутки:
If A (scrollY) + B (innerHeight) >= C (document height) - D (1000px) -> load more photos
Последние мысли
Есть и другие инструменты (Intersection Observer API) для реализации бесконечной прокрутки. Если вы найдете эту статью полезной или у вас есть какие-либо вопросы, подключите меня к LinkedIn или подпишитесь на меня на Medium, чтобы увидеть больше статей.
Больше контента на plainenglish.io
