CSS Scroll Snap позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. 1 Это помогает создать более удобный пользовательский интерфейс на мобильных устройствах, например, позволить пролистывать элементы свайпом, а не перетаскивать пальцем через всю ширину экрана. 1

Некоторые возможности использования CSS Scroll Snap:

• Настройка направления и строгости привязки. 1 Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление прокрутки (x или y), а также строгость привязки (none, mandatory или proximity). 1
• Изменение точек привязки. 1 Свойство scroll-snap-align задаётся дочерним элементам и определяет точки привязки. 1 Доступные значения — start, center и end. 1
• Управление прокруткой. 1 Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. 1 Принимает два значения: normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены; always — контейнер останавливается на каждой точке привязки, прежде чем пользователь сможет скроллить дальше. 1
• Настройка внутреннего отступа контейнера. 1 Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. 1 Это может быть полезно, если высота элемента больше высоты контейнера. 1
• Настройка внешнего отступа элемента. 1 Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. 1

CSS Scroll Snap может улучшить удобство взаимодействия с приложением, например, в галереях изображений и слайдшоу. 2 Однако не стоит создавать точки привязки на всём подряд, например, на страницах со статьями. 2