scrollsnapchange

Событие scrollsnapchange срабатывает в момент остановки прокрутки и выбора новой точки привязки.

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

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

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

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

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

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

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

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

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

💡 Событие не сработает, пока пользователь не отпустит палец или курсор. Если пользователь перестал скроллить, но продолжил зажимать элемент, значит прокрутка не завершилась. Нет завершения прокрутки, нет и события scrollsnapchange.

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