scrollsnapchanging

Событие scrollsnapchanging срабатывает во время прокрутки в момент определения браузером потенциальной точки привязки.

        
          
          scrollContainer.addEventListener('scrollsnapchanging', function(event) {  console.log(event)})
          scrollContainer.addEventListener('scrollsnapchanging', function(event) {
  console.log(event)
})

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

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

Событие содержит ссылки на элементы, к которым может быть привязана прокрутка:

• snapTargetBlock — в блочном направлении;
• snapTargetInline — в строчном направлении.

        
          
          scrollContainer.addEventListener('scrollsnapchanging', function(event) {  // Получаем элемент, к которому может быть привязана прокрутка в блочном направлении  console.log(event.snapTargetBlock)  // Получаем элемент, к которому может быть привязана прокрутка в строчном направлении  console.log(event.snapTargetInline)})
          scrollContainer.addEventListener('scrollsnapchanging', function(event) {
  // Получаем элемент, к которому может быть привязана прокрутка в блочном направлении
  console.log(event.snapTargetBlock)

  // Получаем элемент, к которому может быть привязана прокрутка в строчном направлении
  console.log(event.snapTargetInline)
})

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

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

💡 В отличие от события scrollsnapchange, которое ждет завершения прокрутки, scrollsnapchanging срабатывает в момент пролистывания. Если пользователь медленно скроллит, не отрывая палец или курсор, событие сработает несколько раз, пока он пролистывает возможные точки привязки. Каждый раз, когда браузер определяет, что при остановке прокрутка зафиксируется на новом элементе, событие сообщает, какой это элемент.

💡 При быстром пролистывании через несколько точек привязки событие сработает один раз — для конечной точки.