scroll-behaviorСвойство в CSS позволяет определить подскакивает ли место прокрутки браузера на новое место или плавно одушевляет переход , когда пользователь нажимает на ссылку , что цели Привязанного положения в прокрутке окна.
html ( scroll-behavior: smooth; )Более глубокое объяснение
Подождите, подождите, о чем мы говорим? Это элемент с содержимым, выходящим за его границы.
См. Окно прокрутки пера от CSS-Tricks (@ css-tricks) на CodePen.
Обратите внимание на то, что поле в приведенной выше демонстрации имеет фиксированную высоту 200px? Любое содержимое, превышающее эту высоту, находится за пределами рамки, и мы добавили, overflow-y: scrollчтобы сделать это дополнительное содержимое доступным с помощью вертикальной прокрутки. Вот что мы подразумеваем под полем прокрутки.
Теперь предположим, что мы добавили навигацию в верхнюю часть окна, где каждая ссылка нацелена на три раздела контента:
См. Раздел Pen Scrolling Box w / Nav by CSS-Tricks (@ css-tricks) на CodePen.
Каждая ссылка ведет пользователя непосредственно к различным разделам содержимого внутри поля прокрутки. По умолчанию переход между ними является резким скачком.
Такой прыжок может вызвать неприятные ощущения. Вот тут-то и scroll-behaviorпоявляется возможность установить плавный переход при прокрутке. Такие вещи используются для создания причудливого Javascript, но scroll-behaviorдадут нам возможность делать это изначально в CSS, когда поддержка браузеров улучшится.
Синтаксис
.module ( scroll-behavior: ( auto | smooth ); )Значения
scroll-behaviorСвойство принимает два значения, которые по существу тумблер гладкой функции прокрутки и выключаться.
auto(по умолчанию): это значение допускает резкий переход между элементами в поле прокрутки.smooth: Верно своему названию, это значение представляет собой плавный анимированный переход между элементами в поле прокрутки.
Демо
Следующая демонстрация будет работать только в Chrome 61+, Firefox 36+ и Opera 48+ на момент написания этой статьи.
См. Окно прокрутки пера с `scroll-behavior` от CSS-Tricks (@ css-tricks) на CodePen.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 61 | 36 | Нет | 79 | Нет |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | Нет |
Дополнительная информация
- Модуль просмотра CSSOM: черновик спецификации, включая свойство CSS. Текущий черновик включает рекомендацию перенести
scroll-behaviorспецификацию в другую, так что будет интересно посмотреть, где это произойдет. - Сеть разработчиков Mozilla: ссылка на спецификацию MDN.
- Состояние платформы Microsoft Edge: в настоящее время отображается состояние этой функции как «Рассматривается».
- Статус платформы Chrome: в настоящее время показывает статус этой функции как «В разработке» и включает статусы для других платформ в качестве дополнительной информации.
- Smooth Scrolling Snippet: фрагменты для плавной прокрутки с помощью Javascript и jQuery
- Плавная прокрутка и доступность: публикация CSS-Tricks о влиянии плавной прокрутки с поддержкой Javascript