Плавная прокрутка на iOS

2391
views

По умолчанию все страницы в браузерах под iOS имеют импульсную прокрутку «momentum scrolling», которая позволяет странице еще продолжать движение после скролла. Подобное инерционное движение можно наблюдать если толкнуть шайбу по льду. Можно подумать, что подобными свойствами должны обладать все элементы страницы, у которых задан внутренний скролл, но это не так.

Внутренние элементы страницы с прокруткой в момент отрыва пальца от экрана будут останавливаться. И что бы придать им плавной прокрутки необходимо добавить всего одно css свойство.

#scrollbox {
  overflow-y: scroll; /* также может быть auto */
  -webkit-overflow-scrolling: touch;
}

Если понадобится обрабатывать на js прокрутку в таком блоке, то js код необходимо вешать на событие:

document.getElementById("scrollbox")
.addEventListener('touchstart', function(event){
    //ваш код
});