5 августа 2017  /  Фронтенд

Плавный, нативный скрол

Полосы прокрутки семейства Windows

Плавная прокрутка до определенного места на странице — очень распространенная фича, особенно в лендингах. Еще один классический случай — плавный переход по хэшу для навигации по странице.

Для решения этих проблем уже написано много решений. В начале карьеры я и сам такое писал сначала на jQuery, а потом на requestAnimationFrame. К счастью о таких костылях можно забыть, потому что теперь можно передать дополнительный параметр в метод window.scroll, в котором можно указать что прокручивать нужно с анимацией.

Покажи нам код

window.scroll({
    top: 2500,
    left: 0,
    behavior: 'smooth'
});

Демки

Без полифила работает только в Firefox, в Chrome под экспериментальным флагом. Можно добавить полифил и заработает везде. Поэтому я советую использовать именно этот метод для прокрутки на странице и отказаться от сторонних библиотек. А через пару лет можно будет и полифил выкинуть.

Работает для методов scroll, scrollTo, scrollBy, scrollIntoView.

Ссылки

1. Github полифила
2. Черновик спецификации
3. Документация на MDN

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.