Создать плавную прокрутку сейчас намного легче, чем раньше. Если нужно, чтобы она постоянно присутствовала на веб-странице и можно, чтобы браузер отвечал за ее продолжительность, достаточно всего одной строки кода CSS:

html {
  scroll-behavior: smooth;
}

Но пользователи не любят плавную прокрутку. Конечно, неудобно, что нельзя задать продолжительность плавной прокпуики, но дело не только в этом. Основное, что расстраивало пользователей, был поиск по веб-странице. Одно дело нажать на ссылку и плавно приблизиться к соответствующему заголовку, что в целом интересно, а совсем другое — медленно подбираться к нужным словам во время поиска, когда хочется быстро найти ответ. Пользователям веб-сайта кажется, что прокрутка между результатами поиска по странице медленная и раздражающая. И мы с ними согласны.

Это странно, но даже варианту плавной прокрутки, созданному с помощью кода JavaScript, нельзя настроить скорость:

document.querySelector('.hello').scrollIntoView({
  behavior: 'smooth'
});

Также не существует надежного способа определить, происходит ли в данный момент поиск по веб-странице, чтобы изменить пользовательский интерфейс, например, отключив плавную прокрутку.

Возможно, наибольший недостаток планой прокрутки — возможность сбить фокус. Прокрутка до элемента с помощью кода JavaScript работает хорошо, пока фокус передвигается почти туда, куда прокручивается веб-страница.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание необычных стилей для ссылок
• Тонированные изображения с помощью множественных фоновых изображений
• Создание многострочного градиентного фона для текста