Управляемая прокрутка с помощью CSS Scroll Snap

Создавайте хорошо контролируемые возможности прокрутки, объявляя позиции привязки прокрутки.

Robert Flack
Majid Valipour
Majid Valipour
X GitHub

Функция привязки прокрутки CSS позволяет веб-разработчикам создавать контролируемые возможности прокрутки, объявляя позиции привязки прокрутки. В качестве примера можно привести статьи, разбитые на страницы, и карусели изображений. CSS Scroll Snap предоставляет простой в использовании и согласованный API для создания этих популярных шаблонов UX.

Фон

Зачем нужна привязка прокрутки

Прокрутка – это популярный и естественный способ взаимодействия с контентом в интернете. Это встроенный способ платформы предоставить доступ к большему объему информации, чем видно на экране за один раз, что становится особенно важным на мобильных платформах с ограниченным пространством экрана. Поэтому неудивительно, что авторы веб-контента все чаще предпочитают организовывать контент в виде прокручиваемых плоских списков, а не глубоких иерархий.

Основной недостаток прокрутки – неточность. Редко когда прокрутка заканчивается на абзаце или предложении. Это особенно заметно, когда прокрутка останавливается посередине страницы или изображения, оставляя их частично видимыми. Эти варианты использования выгода от хорошо контролируемого опыта прокрутки.

Чтобы решить эту проблему, веб-разработчики долгое время использовали решения на основе JavaScript. Однако решения на основе JavaScript не обеспечивают полной точности из-за отсутствия примитивов настройки прокрутки или доступа к составной прокрутке. CSS Scroll Snap – это быстрое, точное и простое в использовании решение, которое работает одинаково во всех браузерах.

Привязка прокрутки CSS позволяет веб-разработчикам отмечать границы для операций прокрутки в каждом контейнере прокрутки. Затем браузеры выбирают наиболее подходящую конечную позицию в зависимости от особенностей операции прокрутки, макета и видимости контейнера прокрутки, а также деталей позиций привязки, а затем плавно анимируют ее. Возвращаясь к нашему предыдущему примеру, когда пользователь заканчивает прокрутку карусели, его видимое изображение встает на место. В JavaScript не нужно настраивать прокрутку.

Пример использования привязки прокрутки CSS с каруселью изображений.
Пример использования привязки прокрутки CSS с каруселью изображений. В этом случае привязка прокрутки гарантирует, что в конце прокрутки горизонтальный центр изображения будет выровнен по горизонтальному центру контейнера прокрутки.

Привязка прокрутки CSS

Привязка прокрутки – это корректировка смещения прокрутки контейнера прокрутки, чтобы он находился в предпочтительном положении привязки после завершения операции прокрутки.

Чтобы включить привязку прокрутки для контейнера, используйте свойство scroll-snap-type. Это указывает браузеру, что он должен рассмотреть возможность привязки этого контейнера прокрутки к позициям привязки, созданным его потомками. scroll-snap-type определяет ось, по которой происходит прокрутка (x, y или both), и строгость привязки (mandatory, proximity). Подробнее об этом мы поговорим позже.

Позицию привязки можно задать, указав нужное выравнивание элемента. Эта позиция представляет собой смещение прокрутки, при котором ближайший предок контейнера прокрутки и элемент выравниваются, как указано для данной оси. Для каждой оси возможны следующие варианты выравнивания: start, end, center.

Выравнивание start означает, что начальный край области привязки контейнера прокрутки должен совпадать с начальным краем области привязки элемента. Аналогично, выравнивания end и center означают, что конечный край или центр области привязки контейнера прокрутки должны быть выровнены с конечным краем или центром области привязки элемента.

Пример различных выравниваний на горизонтальной оси прокрутки.

Ниже приведены примеры использования этих понятий.

Чаще всего привязка прокрутки используется в каруселях изображений. Например, чтобы создать горизонтальную карусель изображений, которая привязывается к каждому изображению при прокрутке, мы можем указать, что контейнер прокрутки должен иметь обязательное значение scroll-snap-type по горизонтальной оси. Установите для каждого изображения значение scroll-snap-align: center, чтобы привязка центрировала изображение внутри карусели.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Поскольку позиции привязки связаны с элементом, алгоритм привязки может быть умным в отношении того, когда и как он привязывается, учитывая размер элемента и контейнера прокрутки. Например, если одно изображение больше карусели, Простой алгоритм привязки может помешать пользователю панорамировать изображение, чтобы увидеть его целиком. Однако спецификация требует, чтобы реализации обнаруживали этот случай и позволяли пользователю свободно прокручивать изображение, привязываясь только к его краям.

Пример: страница товара с историей

Другой распространенный случай, когда может быть полезна привязка прокрутки, – это страницы с несколькими логическими разделами для вертикальной прокрутки, например типичная страница товара. scroll-snap-type: y proximity; больше подходит для таких случаев. Она не мешает пользователю прокручивать страницу до середины определенного раздела, но также привязывает и привлекает внимание к новому разделу, когда пользователь прокручивает страницу достаточно близко.

Вот как это сделать:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Поля и отступы прокрутки

На странице товара есть фиксированный верхний заголовок. Дизайн также требовал, чтобы часть верхнего раздела оставалась видимой, когда контейнер прокрутки привязан, чтобы предоставить пользователям подсказку о содержимом выше.

Свойство scroll-padding – это новое свойство CSS, которое можно использовать для настройки эффективной видимой области контейнера прокрутки или области привязки, которая используется при расчете выравнивания привязки прокрутки. Это свойство определяет вставку относительно поля заполнения контейнера прокрутки. В нашем примере сверху было добавлено дополнительное смещение 15vh, которое указывает браузеру, что в качестве вертикального начального края для привязки прокрутки следует использовать более низкую позицию, на 15vh ниже верхнего края контейнера прокрутки. При привязке начальный край целевого элемента выравнивается по этой новой позиции, оставляя пространство сверху.

Свойство scroll-margin определяет величину смещения, используемую для корректировки эффективного поля целевого объекта привязки, аналогично тому, как scroll-padding работает в контейнере прокрутки с привязкой.

Вы могли заметить, что в названиях этих двух свойств нет слова "snap". Это сделано намеренно, поскольку они изменяют поле для всех соответствующих операций прокрутки, а не только для привязки прокрутки. Например, Chrome учитывает их при расчете размера страницы для операций прокрутки, таких как PageDown и PageUp, а также при расчете объема прокрутки для операции Element.scrollIntoView().

Взаимодействие с другими API прокрутки

DOM Scrolling API

Привязка прокрутки происходит после всех операций прокрутки, включая инициированные скриптом. При использовании API, таких как Element.scrollTo, браузер рассчитывает предполагаемую позицию прокрутки, а затем применяет соответствующую логику привязки, чтобы найти окончательное местоположение. Таким образом, пользовательскому скрипту не нужно выполнять никаких ручных вычислений для привязки.

Плавная прокрутка

Плавная прокрутка управляет поведением программной прокрутки, а привязка прокрутки определяет ее назначение. Поскольку они управляют ортогональными аспектами прокрутки, их можно использовать вместе и дополнять друг друга.

Эффект достижения конца прокрутки

Overscroll behavior API управляет тем, как прокрутка связывается между несколькими элементами, и на него не влияет привязка прокрутки.

Предостережения и рекомендации

Не используйте обязательную привязку, если целевые элементы расположены далеко друг от друга. Из-за этого контент между позициями привязки может стать недоступным.

Во многих случаях привязку прокрутки можно добавить в качестве улучшения без необходимости обнаружения функций. При необходимости используйте @supports или CSS.supports, чтобы определить, поддерживается ли привязка прокрутки CSS. Не используйте свойство scroll-snap-type, которое также присутствует в устаревшей спецификации.

Обнаружение функций в CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Обнаружение функций в JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Не думайте, что API для программной прокрутки, такие как Element.scrollTo, всегда завершают работу на запрошенном смещении прокрутки. Привязка прокрутки может корректировать смещение прокрутки после завершения программной прокрутки. Обратите внимание, что это предположение не было верным даже до появления привязки прокрутки, поскольку прокрутка могла быть прервана по другим причинам, но это особенно актуально для привязки прокрутки.

Дальнейшие действия

Прокрутка была в центре внимания недавнего опроса, проведенного командой Chrome. Результаты опроса выявили несколько областей, требующих дополнительной работы. чтобы сократить разрыв между библиотеками плагинов и CSS. В ближайшее время мы планируем сосредоточиться на scroll-snap, в том числе:

  1. Доступность API и совместимость с браузерами.
  2. Работа над новыми CSS API, такими как scroll-start.
  3. Работайте с новыми событиями JS, такими как snapChanged().