Нативная плавная прокрутка с помощью JS

Появился новый способ вызывать прокрутку с помощью JavaScript, с помощью него можно определять её поведение: плавная, мгновенная или автоматическая (на выбор браузера, полагаю).

window.scrollBy({ top: 100, behavior: 'smooth' });

(Арррг, как же бесит использование слова behavior, вместо behaviour, на американский манер).

Я вчера прочла письмо, в котором говорится, что этот метод будет доступен (нашла ссылку на него в этом твите сделанном @FirefoxNightly) и немедленно захотела попробовать!

Сперва я удостоверилась, что у меня самая свежая копия Firefox Nightly —  вам понадобится версия от 28 октября или более свежая. Затем включила поддержку свойства открыв настройки браузера с помощью url about:config и установив true в качестве значения свойства layout.css.scroll-behavior.enabled. Даже перезапускать браузер не понадобилось.

Мой пример выглядит следующим образом:

(Исходный код)

Кроме того, вы можете установить режим прокрутки в CSS:

#myelement {
    scroll-behavior: smooth;
}

Но в моем примере я такую возможность не использовала. Не хотите написать свой? :)

Причина, по которой меня всё это так радует, в том, что раньше приходилось эмулировать такое поведение с помощью плагинов и том, что при этом происходит многократное вмешательство в работу пайплайна рендеринга и это замечательно, что теперь прокрутка будет реализоваться средствами браузера и станет шикарно плавной. Остальные платформы обладают той же проблемой и веб в результате выглядит «не круто». Ну, теперь у нас есть решение.

Еще одно достоинство этого метода в том, что он отлично деградирует — если движок не распознает аргумент, то его поведение … просто вернется к стандартному, но прокрутка все же сработает.

Думаю вы можете продолжать использовать эти ваши не-очень-высоко-производительные плагины, если вам нужен свой, конкретный, алгоритм прокрутки (возможно вы хотите, что бы она определенным образом пружинила и т.д.). Используйте значение instant вместо smooth и — вперед.

СКРОЛЬ, СКРОЛЬ, СКРОЛЬ, СКРОЛЬ!