Встроенная поддержка браузера для плавной прокрутки

Оригинальный адрес:Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу

С конца прошлого года браузер начал поддерживать собственное позиционирование с плавной прокруткой браузера, CSSscroll-behaviorСвойства и JSscrollIntoView()любой метод.

1. CSS прокрутка и плавная прокрутка

scroll-behavior:smoothНаписано на элементе контейнера прокрутки, чтобы сгладить прокрутку контейнера (не вызывается жестами мыши).

Сначала рассмотрим реальный случай.

8 лет назад"Реализация эффекта переключения поворота табуляции с помощью чистого CSS без JavaScript«В этом посте рассказывается о методе реализации переключения вкладок (по сути, запускающего прокрутку полосы прокрутки) с использованием позиционирования привязки в чистом CSS.

Это может быть трудно щелкнуть здесь:Демонстрация эффекта переключения без JavaScript

См. следующий скриншот GIF для эффекта после реализации:

锚点选项卡切换

Основные функции могут быть удовлетворены, но есть две проблемы: во-первых, изменение местоположения, реализованное с помощью хэша местоположения, вызовет собственное поведение прокрутки браузера, и это не очень хорошо;

Итак, позже я изобрел чистый эффект переключения вкладок CSS, основанный на том, что фокус элемента управления вызывает изменение положения прокрутки.Это упоминается в главе о переполнении книги «Мир CSS», вы можете нажать здесь:демонстрация позиционирования привязки фокуса и переключения вкладок переполнения

focus输入框与选项卡切换

Это также чистая реализация CSS без кода JavaScript по сравнению с прямым использованием.<a>элементальhrefМетод прыжка привязки, этот метод не будет запускать прокрутку внешней формы браузера, и опыт будет улучшен до более высокого уровня, но все еще есть проблема, то есть когда содержимое вкладки переключается, это по-прежнему "пиф-паф". Эффект Бабы не имеет мокрого эффекта скольжения.

Не волнуйтесь, сейчас с поведением прокрутки CSS, проблема гладкой прокрутки также может быть решена. Вы можете нажать здесь:Демонстрация плавной прокрутки вкладки CSS scroll-behavior

По сравнению с предыдущей сухой реализацией есть такое предложение CSS——scroll-behavior:smooth:

.box {
    scroll-behavior: smooth; 
    overflow: hidden; 
}

В результате появился интерактивный эффект, похожий на весенний ветерок, ударивший в лицо, см. следующий эффект скриншота видео (статья Nuggets не поддерживает встроенное видео, вы можете перейти кПосмотреть исходный текст), Или статический вид мозга тоника:

Более простое и практичное использование

фактическиscroll-behaviorЦветочных головок в его употреблении не так много, вы просто запомните эту фразу -

Просто добавьте scroll-behavior:smooth везде, где вам нужно прокручивать!

Вам все равно, может он им пользоваться или нет, и вам не важна совместимость с браузером, вы его добавляете. Это как бесплатная лотерея без денег.Если не выиграешь-не беда,и терять нечего.Если выиграешь-хорошо,вишенка на торте!scroll-behavior:smoothЭто моча.

Например, в браузерах для ПК прокрутка веб-страниц по умолчанию составляет<html>На этикетке большинство мобильных терминалов в<body>На этикетке я добавил это предложение:

html, body { scroll-behavior:smooth; }

На этом этапе нажатие на ссылку «наверх», показанную в приведенном ниже коде, приведет к плавной прокрутке вверх.

<a href="#">返回顶部</a>

С этой точки зрения сброс CSS отраслевых браузеров может добавить такое правило:

html, body { scroll-behavior:smooth; }

2. JS scrollIntoView и плавная прокрутка

элемент DOMscrollIntoView()Метод представляет собой нативный API JS, который также поддерживается браузерами IE6, который позволяет элементам вводить в просмотр экрана, вызвав позиционирование контейнера прокрутки.

С Chrome и Firefox браузеры стали поддерживать CSSscroll-behaviorсвойства, кстатиscrollIntoView()Метод был обновлен для поддержки большего количества параметров, одним из которых является плавная прокрутка.

Синтаксис следующий:

target.scrollIntoView({
    behavior: "smooth"
});

Открываем случайным образом связанную страницу, прокручиваем первую ссылку за пределы экрана, а затем вводим в консоль следующий код, мы видим, что страница прокручивается плавно и позиционируется:

document.links[0].scrollIntoView({
    behavior: "smooth"
});

Скриншот видео ниже:

разное:

scrollIntoView()Модернизированный метод, в дополнение к поддержке'behavior',а также'block'а также'inline'и другие параметры, если вы заинтересованы, вы можете обратиться кДокументы, связанные с MDN.
Если наша веб-страница настроена с помощью CSSscroll-behavior:smoothоператор, мы непосредственно выполняемtarget.scrollIntoView()метод будет иметь плавную прокрутку, никаких дополнительных настроек не требуетсяbehaviorпараметр. Например, если вы просматриваете эту статью на оригинальном сайте Xin Space, открываете консоль и выполняете следующий код, вы можете увидеть эффект плавной прокрутки:
```
document.forms[0].scrollIntoView();
```

3. Плавная прокрутка JS обратно совместима

JS добиться плавной прокрутки не сложно, в jQueryanimate()метод:

scrollContainer.animate({
    scrollTop: 0
});

или использоватьrequestAnimationFrame APIЭтот тип собственного JS также может быть реализован. Например, вот метод, который я набросал:

/**
 @description 页面垂直平滑滚动到指定滚动高度
 @author zhangxinxu(.com)
*/
var scrollSmoothTo = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            return setTimeout(callback, 17);
        };
    }
    // 当前滚动高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滚动step方法
    var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};

ИспользоватьМой собственный JS-алгоритм анимации замедления, прокручивайте быстрее, затем медленнее.

Используйте, например, следующее: мы хотим, чтобы веб-страница плавно прокручивалась вверх напрямую:

scrollSmoothTo(0);

Вот и все.

Сложность заключается в том, как поддерживать нативную браузерную обработку плавной прокрутки, а браузеры, которые ее не поддерживают, по-прежнему используют для ее обработки старый метод JS. Например, IE и Safari еще не поддерживают встроенную плавную прокрутку.

scroll-behavior浏览器兼容性

Нужно рассматривать отдельно, JS мой процесс суждения выглядит следующим образом:

if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
   // 传统的JS平滑滚动处理代码...
}

Это обеспечивает бесшовное соединение.

(Конец этой статьи)