scroll-snap-align

Свойство scroll-snap-align задаёт выравнивание элемента внутри прокручиваемого контейнера при остановке скролла.

        
          
          .element {  scroll-snap-align: start;}
          .element {
  scroll-snap-align: start;
}

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

Свойство scroll-snap-type управляет тем, в каком месте прокручиваемой оси остановится элемент: началe, серединe или концe.

Возможные значения scroll-snap-align:

• none — отключает привязку, значение по умолчанию;
• start — элемент привязывается к началу прокручиваемой оси;
• center — элемент привязывается к середине прокручиваемой оси;
• end — элемент привязывается к концу прокручиваемой оси.

        
          
          .scroll-snap-align-start {  scroll-snap-align: start;}.scroll-snap-align-center {  scroll-snap-align: center;}.scroll-snap-align-end {  scroll-snap-align: end;}
          .scroll-snap-align-start {
  scroll-snap-align: start;
}

.scroll-snap-align-center {
  scroll-snap-align: center;
}

.scroll-snap-align-end {
  scroll-snap-align: end;
}

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

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

💡 Чтобы привязка к указанной точке начала работать, необходимо также задать свойство scroll-snap-type контейнеру, в котором находится элемент.