Как использовать CSS Scroll Snap для создания более удобного пользовательского интерфейса на мобильных устройствах?

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

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

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

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