Не будучи 2000 и поздно
Плавная прокрутка была проблемой в умах разработчиков с незапамятных времен. Мы много чего сделали для анимации страницы, но что произойдет, если у вас есть динамический контент, который постоянно меняется? Полосы прокрутки с фиксированной высотой и процентные значения так 2000 и позже. Наступил 2019 год, и у нас есть Resize Observer - надежный способ определения высоты вашего контента, при этом всегда сохраняя ощущение собственной прокрутки, к которому привыкли пользователи. Плавная прокрутка должна улучшить UX, а не ухудшить его.
Давайте начнем.
Прежде всего, мы создадим компонент SmoothScroll с двумя div, один в качестве области просмотра, а другой - для добавления высоты к фактическому телу, чтобы мы могли прокручивать страницу и добавлять их в качестве ссылок.
Теперь давайте настроим App.js, чтобы мы могли с чем-то работать. Решил, что загружу изображения из unsplash и сопоставлю их в DOM, используя состояние, и добавил кнопку, чтобы мы могли добавить столько или меньше, сколько захотим.
Давайте сделаем базовый стиль, чтобы он не выглядел так уродливо.
А теперь перейдем к мелочам.
Наблюдатель изменения размера возвращает метод, называемый наблюдением (элементы), который принимает массив элементов или один элемент. На всякий случай, если вы захотите добавить массив, я решил, что было бы неплохо добавить небольшой цикл.
Теперь, в качестве последнего штриха, мы добавляем в окно прослушиватель прокрутки и сопоставляем его с методом onScroll компонента. Мы также обновим состояние, как только наблюдатель изменения размера обнаружит изменение высоты. Мы оживляем его с помощью GSAP TweenLite и упрощаем его с помощью их алгоритма Power4.easeOut и VOILA. У вас есть отличная страница с плавной прокруткой, которая обновляется при обновлении контента.
Вы можете взглянуть на конечный продукт здесь или просмотреть полный исходный код на CodeSandbox ниже.
Спасибо за ваше время, и я надеюсь, что вы кое-что узнали. Мир снаружи.
Перед тем как уйти, зацените меня в моих соцсетях: 👀
🔗 Мой сайт / портфолио
Цифровое агентство, в котором я работаю: Digital Present
