— Сложно, но интересно🍡
В проекте над которым я работал столкнулся с очень интересной задачей, внизу мобильной страницы есть залипающая кнопка, требование было получить вот такой эффект: ✨
Когда пользователь прокручивает страницу на мобильном устройстве до определенной позиции, эта кнопка больше не должна быть липкой внизу, другими словами, она начнет следовать за прокруткой с этой позиции. .
Это выглядит сложно, но после некоторого анализа я обнаружил, что этого можно добиться с помощью следующих шагов, пример ниже:
☘️ Во-первых, присвойте этой закрепленной кнопке состояние видимости и идентификатор, чтобы мы могли ее найти.
☘️ Во-вторых, используйте видимое состояние для условного рендеринга этой залипающей кнопки, например:
☘️ Следующий шаг, чтобы отслеживать положение прокрутки пользователя мгновенно, мы можем добавить прослушиватель событий, который должен быть добавлен при монтировании компонента и удален при размонтировании компонента, давайте дадим ему имя «listenToScroll».
🌸 В функциональном компоненте React этот шаг можно реализовать с помощью useEffect
☘️ Последний шаг тоже самый интересный, мы реализуем эту функцию listenToScroll:
Нам понадобятся два значения выше 👇
- положение скрытия этой липкой кнопки (например, heightToHide)
- мгновенная позиция прокрутки пользователя (например, windowScrollHeight)
Нам нужно создать функцию, которая получает heightToHide (назовем ее getOffset) и сравнить ее с windowScrollHeight:
- если windowScrollHeight ‹ heightToHide, то липкая кнопка всегда будет отображаться внизу ⏹
- если windowScrollHeight › heightToHide, то липкая кнопка внизу должна исчезнуть, но до этого момента отображаться как кнопка не липкая, которая следует за прокруткой ⬆️
👉 Функция getOffset() выше использует метод getBoundingClientRect для получения информации о размере элемента и его позиции (в нашем случае ‹div › с идентификатором stickyButtonPlaceholder), информация содержит свойства left, top, right, bottom, x, y, width, height.
👓 Мы импортируем эту функцию с помощью import { getOffset } из «./getOffset» в наш компонент и выполняем ее с id div, чтобы получить позицию для скрытия — в нашем случае heightToHide.
👓 С помощью метода scrollTop мы можемполучить количество пикселей, на которое содержимое элемента прокручивается по вертикали — в нашем случае windowScrollHeight.
👉 Мы сравниваем эти два значения и обновляем состояние видимости липкой кнопки, а затем рендерим ее по условию!
🍄 Результат: прокрутите вверх до этого конкретного ‹div›, кнопка-липучка внизу исчезнет и начнет следовать за прокруткой с этой позиции в качестве кнопки замены.
Большое спасибо за ваше терпение в чтении моей статьи, я надеюсь, вам понравится. 👐
Если вам интересны другие мои статьи:
