От создателя: одной из областей, где Веб обычно отстает от нативных платформ, является воспринимаемая «привлекательность» приложения. Отчасти это восприятие происходит от того, как пользовательский интерфейс реагирует на взаимодействие с юзером, включая прокрутку содержимого.
Столкнувшись с ограничениями веб-платформы, создатели нередко обращаются к библиотекам и фреймворкам JavaScript, чтоб поменять процесс прокрутки интернет-страницы — время от времени именуемый “scroll-jacking” — не постоянно отлично, если он реализован без подабающего учета пользовательского опыта. Повышение количества библиотек также может привести к раздуванию странички и понижению производительности веб-сайта. Но при помощи относительно новейшей спецификации CSS Scroll Snap мы можем надзирать поведение прокрутки интернет-страницы (до некой степени), используя веб-стандарты, не прибегая к томным библиотекам. Давайте поглядим, как.
Юзер может управлять положением прокрутки интернет-страницы несколькими методами, к примеру, используя мышь, сенсорный жест либо клавиши со стрелками. В отличие от линейной прокрутки, где скорость прокрутки отражает скорость контроллера, спецификация Scroll Snap дозволяет интернет-странице привязываться к определенным точкам при прокрутке юзера. Для этого нам нужен элемент с фиксированной высотой, который будет делать роль контейнера прокрутки, и прямые дочерние элементы этого элемента будут определять точки привязки. Чтоб показать это, вот вам наглядный пример HTML, который состоит из div, содержащего четыре элемента section:
Section 1
Section 2
Section 3
Section 4
| 1234567891011121314 |
Section 1
Section 2
Section 3
Section 4
|
Привязка прокрутки просит наличия 2-ух главных параметров CSS: scroll-snap-type и scroll-snap-align. scroll-snap-type применяется к элементу контейнера прокрутки и воспринимает в качестве значения два главных слов. Это показывает браузеру:
Направление для привязки
Является ли привязка неотклонимой
scroll-snap-align применяется к дочерним элементам — в нашем случае section. Нам также необходимо установить фиксированную высоту для контейнера прокрутки и соответственное значение характеристики overflow — scroll.
CSS .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;
}
section { height: 100vh; scroll-snap-align: center;
}
| 12345678910 | .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;} section { height: 100vh; scroll-snap-align: center;} |
В приведенном выше примере я устанавливаю направление в свойстве scroll-snap-type — y, чтоб указать привязку по вертикали. 2-ое значение показывает, что привязка является неотклонимой. Это значит, что когда юзер прекращает прокрутку, его позиция прокрутки постоянно привязывается к наиблежайшей точке привязки. Другое значение proximity, которое описывает, что позиция прокрутки юзера будет привязана лишь в этом случае, если он приостановит прокрутку поблизости точки привязки. (Это зависит от браузера — он описывает, что считает порогом близости.)
Если у вас есть содержимое неопределенной длины, которое быть может больше, чем высота контейнера прокрутки (в этом случае 100vh), то внедрение значения mandatory может вызвать скрытие некого содержимого над либо под видимой областью, потому это не рекомендуется. Но если вы понимаете, что ваш контент постоянно будет вписываться в область просмотра, то mandatory может обеспечить наиболее согласованное взаимодействие с юзером.
В этом примере я устанавливаю для контейнера прокрутки и для всякого из разделов высоту 100vh, которая влияет на процесс прокрутки всей интернет-страницы. Но привязка прокрутки также быть может реализована на наименьших компонентах. Установка привязки прокрутки по оси X (либо по оси) может да эффекту карусели.
В данной нам демонстрации вы сможете горизонтально прокручивать разделы:
Intersection Observer API
Благодаря реализации CSS, приведенной выше, наша интернет-страница уже смотрится наиболее нативно. Чтоб сделать лучше это, мы могли бы добавить некие переходы и анимацию на базе прокрутки. Для этого нам пригодится мало Javascript, использующего Intersection Observer API. Это дозволит нам сделать наблюдающий, который выслеживает элементы, пересекающиеся с окном просмотра, вызывая функцию оборотного вызова, когда это происходит. Это наиболее отлично, чем библиотеки, которые полагаются на неизменное прослушивание событий прокрутки.
Мы можем сделать наблюдающего, который следит за каждым из наших разделов прокрутки, входящих и выходящих из окна просмотра:
JavaScript const sections = […document.querySelectorAll(‘section’)]
%MINIFYHTML96159498c495441ef0c31e9b5c43853214% %MINIFYHTML96159498c495441ef0c31e9b5c43853215%
const options = { rootMargin: ‘0px’, threshold: 0.25
}
const callback = (entries) => { entries.forEach((entry) => { if (entry.intersectionRatio >= 0.25) { target.classList.add(«is-visible»); } else { target.classList.remove(«is-visible»); } })
}
const observer = new IntersectionObserver(callback, options)
sections.forEach((section, index) => { observer.observe(section)
})
| 12345678910111213141516171819202122 | const sections = […document.querySelectorAll(‘section’)] const options = { rootMargin: ‘0px’, threshold: 0.25} const callback = (entries) => { entries.forEach((entry) => { if (entry.intersectionRatio >= 0.25) { target.classList.add(«is-visible»); } else { target.classList.remove(«is-visible»); } })} const observer = new IntersectionObserver(callback, options) sections.forEach((section, index) => { observer.observe(section)}) |
В этом примере функция оборотного вызова запускается каждый раз, когда один из наших разделов пересекает контейнер на 25% (используя опцию threshold). Функция оборотного вызова добавляет класс is-visibleк разделу, если он имеет не наименее 25% пересечения с наблюдаемым контейнером, когда происходит пересечение (которое вступит в силу при возникновении элемента в окне просмотра), и удаляет его в неприятном случае (когда элемент выходит из окна просмотра). Потом мы можем добавить мало CSS для контент всякого из этих разделов для перехода:
CSS section .content { opacity: 0:
}
section.is-visible .content { opacity: 1; transition: opacity 1000ms:
}
| 12345678 | section .content { opacity: 0:} section.is-visible .content { opacity: 1; transition: opacity 1000ms:} |
Данная демонстрация иллюстрирует это в действии:
Естественно, вы могли бы воплотить некие наиболее необычные эффекты перехода и анимации в CSS либо JS!
Не считая того, необходимо отметить, что на практике мы не должны устанавливать значение opacity: 0 по дефлоту, не принимая во внимание опыт, если JavaScript не загружается. В этом случае юзер совершенно не увидит никакого контента! Есть различные методы совладать с сиим: мы можем добавить класс .no-js для body (который мы удаляем при загрузке при помощи JS) и установить для него стили по дефлоту, либо мы можем установить исходный стиль (до перехода) при помощи JS заместо CSS.
Position: sticky
Еще есть одно свойство CSS, которое, как мне кажется, может посодействовать в работе с прокруткой, и это свойство position. В отличие от position: fixed, которое перекрывает положение элемента относительно наиблежайшего предка и не меняется, position: sticky больше похож на временную блокировку. Элемент со значением позиции sticky станет фиксированным лишь до того времени, пока не достигнет порога собственного родителя, опосля что он возобновит относительное размещение.
Как пандемия отразилась на посещаемости зарубежных сайтов
«Вставляя» некие элементы в разделы прокрутки, мы можем сделать воспоминание, что они соединены с действием прокрутки меж разделами. Достаточно здорово, что мы можем отдать элементу указание реагировать на его позицию в контейнере лишь при помощи CSS!
Поддержка браузерами и откат
Характеристики scroll-snap-type и scroll-snap-align довольно отлично поддерживается. Первому требуется префикс для Edge и IE, а наиболее старенькые версии Safari не поддерживают значения осей. В новейших версиях Safari это работает достаточно отлично. Intersection Observer также имеет неплохой уровень поддержки, кроме IE.
Оборачивая связанный с прокруткой код в запрос функции, мы можем обеспечить регулярную прокрутку в качестве запасного варианта для юзеров старенькых браузеров, где доступ к контенту является более принципиальным. Браузеры, которые не поддерживают значение оси scroll-snap-type, получат просто обыденную прокрутку.
CSS @supports (scroll-snap-type: y mandatory) { .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;
}
section { height: 100vh; scroll-snap-align: center; }
}
| 123456789101112 | @supports (scroll-snap-type: y mandatory) { .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; } section { height: 100vh; scroll-snap-align: center; }} |
Приведенный выше код исключает MS Edge и IE, потому что они не поддерживают значения осей. Если вы желаете поддерживать их, вы сможете создать это при помощи вендрного префикса и заместо этого применять @supports (scroll-snap-type: mandatory).
Собираем все вкупе
Эта демонстрация соединяет воединыжды все три эффекта, рассмотренных в данной статье.
Заключение
Уделить время на моделирование на базе прокрутки неким может показаться глуповатым либо ветреным занятием. Но я считаю, что это принципиальная часть позиционирования, как жизнестойкой кандидатуры нативным приложениям, сохранения его открытости и доступности. Невзирая на то, что эти новейшие функции CSS не дают всех частей управления, которые мы могли бы ждать от полнофункциональной библиотеки JS, у их есть основное преимущество: простота и надежность. Используя веб-стандарты, где это может быть, мы можем получить наилучшее из обоих миров: симпатичные и осторожные веб-сайты, которые соответствуют ожиданиям клиентов, с доп преимуществом увеличения производительности для юзеров.
Создатель: Michelle Barker
Редакция: Команда webformyself.
Источник
Вам также может понравиться