/ 

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

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

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

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

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

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

Демки

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

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

Ссылки

  1. Github полифила
  2. Черновик спецификации
  3. Документация на MDN
⌘ ⌘ ⌘
Поделиться
Отправить
Код. Плейсхолдер для [contenteditable]
Фронтенд

Код. Плейсхолдер для [contenteditable]

Placeholder полифил для contenteditable элемента

Как называть переменные
Фронтенд

Как называть переменные

Мой взгляд на соглашения наименования переменных, функций, методов и классов

Лайфхак. Номер телефона на сайте
Фронтенд

Лайфхак. Номер телефона на сайте

Надоели звонки от клиентов в 2 часа ночи? Покажите номер телефона на сайте только в рабочее время. Подробности в статье.

На чем тестировать JavaScript фреймворки
Фронтенд

На чем тестировать JavaScript фреймворки

На чем испробовать новую технологию или фреймоврк если нет сайд/пет проекта? Пара интересных задачек в этой заметке.