Классы scroll-smooth и scroll-auto задают scroll-behavior: прокручивает
ли браузер область плавно или сразу ставит её на место, когда прокрутку
запускает переход по якорю или скрипт. Базовые стили Framework уже делают
прокрутку плавной у каждого элемента, поэтому чаще нужен scroll-auto —
чтобы её отключить.
Пример
Нажмите «Вниз на 75%» в обеих областях: скрипт прокручивает их одинаково, а
счётчик показывает, сколько заняла прокрутка.
functiondemoScroll(boxId, labelId, ratio) {
var box = document.getElementById(boxId);
var label = document.getElementById(labelId);
if (!box ||!label) return;
var target = Math.max(0, (box.scrollHeight - box.clientHeight) * ratio);
var start = performance.now();
var stableFrames =0;
box.scrollTo({ top: target });
functiontrack() {
var delta = Math.abs(box.scrollTop - target);
if (delta <=1) stableFrames +=1;
else stableFrames =0;
if (stableFrames >=2) {
label.textContent ='Длительность: '+ Math.round(performance.now() - start) +' мс';
return;
}
requestAnimationFrame(track);
}
requestAnimationFrame(track);
}
functioninitOverscrollBehaviorSmoothDemo() {
var buttons = document.querySelectorAll('.js-demo-scroll');
buttons.forEach(function (button) {
button.addEventListener('click', function () {
var boxId = button.getAttribute('data-box-id');
var labelId = button.getAttribute('data-label-id');
var ratioAttr = button.getAttribute('data-ratio');
var ratio = ratioAttr ==null?0:Number(ratioAttr);
if (!boxId ||!labelId || Number.isNaN(ratio)) return;
demoScroll(boxId, labelId, ratio);
});
});
}
if (document.readyState ==='loading') {
document.addEventListener('DOMContentLoaded', initOverscrollBehaviorSmoothDemo);
} else {
initOverscrollBehaviorSmoothDemo();
}
Классы
Класс
CSS
Значения
scroll-smooth
scroll-behavior: smooth
—
scroll-auto
scroll-behavior: auto
—
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Когда отключать плавность
Плавная прокрутка помогает понять, куда перешла страница по ссылке
оглавления. Мгновенная лучше там, где скрипт часто ставит область в нужное
место: лента сообщений, которая держится у последнего сообщения, журнал,
длинная таблица с переходом к строке.
Для перехода по якорям страницы класс ставят на корневой элемент:
HTML
<htmlclass="scroll-auto">
scroll-smooth возвращает плавность там, где её отключили выше.
Ограничения
Класс не меняет прокрутку колёсиком, клавишами и жестами: её плавность
задают браузер и система.
Скрипт, который передаёт behavior в scrollTo или scrollIntoView,
выбирает поведение сам, и класс на него не действует.
Плавная прокрутка не отключается сама при системной настройке уменьшения
движения (prefers-reduced-motion). Для таких пользователей задайте
scroll-behavior: auto в стилях проекта по медиазапросу
prefers-reduced-motion: reduce.
У семейства нет префиксов ширины экрана и состояния.
