scroll-snap-type

Свойство scroll-snap-type задаёт направление и строгость привязки прокрутки.

        
          
          .scroll-container {  scroll-snap-type: x mandatory;}
          .scroll-container {
  scroll-snap-type: x mandatory;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство scroll-snap-type управляет тем, как прокручивается содержимое контейнера. Оно позволяет фиксироваться при скролле на каждом дочернем элементе, создавая эффект перелистывания. Подобное поведение может пригодиться при вёрстке списков с прокруткой, например, слайдеров.

Возможные значения scroll-snap-type для задания направления привязки:

• x — привязка по горизонтали;
• y — привязка по вертикали;
• block — привязка в блоковом направлении;
• inline — привязка в строчном направлении;
• both — привязка в обоих направлениях: горизонталь + вертикаль или блочное + строчное.

Также можно указать строгость смещения к точкам привязки, настроить которые позволяет свойство scroll-snap-align:

• mandatory — принудительная привязка. Прокрутка всегда смещается к точке привязки. Если пользователь попробует остановить прокрутку между двумя точками привязки, произойдет принудительное смещение к ближайшей;
• proximity — мягкая привязка. Скролл сместится к точке привязки, только если прокрутка остановилась достаточно близко к ней. Если прокрутка была резкой или остановилась далеко от точки, привязка не сработает, и элемент останется там, где пользователь его оставил.

Отключить привязку можно с помощью none (значение по умолчанию).

        
          
          .scroll-snap-type-none {  scroll-snap-type: none;}.scroll-snap-type-mandatory {  scroll-snap-type: x mandatory;}.scroll-snap-type-proximity {  scroll-snap-type: x proximity;}
          .scroll-snap-type-none {
  scroll-snap-type: none;
}

.scroll-snap-type-mandatory {
  scroll-snap-type: x mandatory;
}

.scroll-snap-type-proximity {
  scroll-snap-type: x proximity;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Попробуйте прокрутить каждый из контейнеров.

💡 Для включения привязки прокрутки укажите контейнеру scroll-snap-type, а дочерним элементам scroll-snap-align.

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