- scroll — behavior
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Татьяна Фокина советует
- Несколько неочевидных frontend-хитростей
- Оформление декоративной линии текста (text-decoration-style, text-decoration-color)
- Плавная прокрутка страницы на CSS (scroll-behaviour)
- Анимация появления элемента (быстро и легко)
- Разрыв строки на CSS
- SVG с интерактивными элементами
- scroll-behavior
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Setting smooth scroll behavior
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- Found a content problem with this page?
- Способы добавления плавной прокрутки страницы в CSS и JavaScript
- Прокрутка страницы с помощью CSS
- Скроллинг с помощью jQuery
- Плавная прокрутка на JavaScript
- Решение 1. Метод scrollIntoView()
- Решение 2. Используем window.scrollBy() для плавной прокрутки.
- Решение 3. Использование методов requestAnimationFrame() и window.scrollTo() для плавной прокрутки
scroll — behavior
Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной.
Пример
Скопировать ссылку «Пример» Скопировано
html scroll-behavior: smooth;>html scroll-behavior: smooth; >
Как понять
Скопировать ссылку «Как понять» Скопировано
При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth . Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll — behavior не повлияет на поведение браузера.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Возможные значения scroll — behavior :
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Если вы хотите указать scroll — behavior для всей страницы, указывайте его для селектора html . Для селектора body свойство не сработает.
💡 Значение scroll — behavior не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.
💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.
На практике
Скопировать ссылку «На практике» Скопировано
Татьяна Фокина советует
Скопировать ссылку «Татьяна Фокина советует» Скопировано
🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media с проверкой значения prefers — reduced — motion в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.
@media (prefers-reduced-motion: no-preference) .smooth-scroll scroll-behavior: smooth; >>@media (prefers-reduced-motion: no-preference) .smooth-scroll scroll-behavior: smooth; > >
Несколько неочевидных frontend-хитростей
Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.
Оформление декоративной линии текста (text-decoration-style, text-decoration-color)
В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.
К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):
Можно задавать цвет для оформления текста:
А также стиль линии:
Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь
Плавная прокрутка страницы на CSS (scroll-behaviour)
Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.
- smooth — плавная прокрутка;
- instant — мгновенная прокрутка;
- auto — на усмотрение браузера.
Если плавная прокрутка страницы на вашем сайте не является чем-то критичным, смело используйте это свойство. Вы получите плавный скролл при переходе по якорям с помощью всего одного CSS-правила как минимум, в Firefox .
Пример
Анимация появления элемента (быстро и легко)
Представьте, что вам нужно создать страницу с динамически подгружаемым контентом. К примеру, ленту новостей, в которой при прокрутке появляются все новые и новые элементы. Чтобы элементы не мелькали перед глазами, неплохо было бы анимировать их появление.
Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).
Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.
@keyframes fade-in < 0% < opacity: 0; >100% < opacity: 1; >> .content
- Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
- Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.
Изучить рабочий пример можно здесь.
Разрыв строки на CSS
Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом
внутри:
К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!
SVG с интерактивными элементами
Если вам когда-нибудь приходилось оформлять взаимодействие с SVG-элементами, вы знаете, что сделать это не так-то просто. Чтобы обращаться в CSS к отдельным SVG-элементам, приходится добавлять на страницу не тег , а код всего SVG-изображения целиком. Это делает HTML-код ужасно громоздким. В результате нам приходится жертвовать размером страницы и лаконичностью кода ради визуальных эффектов.
Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:
Казалось бы, если мы прописали стили в самом изображении, то они должны отрабатывать при добавлении SVG как обычного ! Однако, не все так просто. Добавленные таким образом стили все равно работать не будут. Но мы можем сделать ход конем и добавить SVG на страницу с помощью или :
Возможно, это не самое красивое решение, но оно явно лучше, чем захламленная SVG-кодом страница. Если вы знаете более красивый способ, пожалуйста, поделитесь им в комментариях!
UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.
Кстати, при желании в SVG-файл можно добавить и CSS анимацию:
Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!
scroll-behavior
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
Try it
Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.
User agents are allowed to ignore this property.
Syntax
/* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: revert; scroll-behavior: revert-layer; scroll-behavior: unset;
The scroll-behavior property is specified as one of the keyword values listed below.
Values
The scrolling box scrolls instantly.
The scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
Formal definition
Formal syntax
Examples
Setting smooth scroll behavior
HTML
nav> a href="#page-1">1a> a href="#page-2">2a> a href="#page-3">3a> nav> div class="scroll-container"> div class="scroll-page" id="page-1">1div> div class="scroll-page" id="page-2">2div> div class="scroll-page" id="page-3">3div> div>
CSS
a display: inline-block; width: 50px; text-decoration: none; > nav, .scroll-container display: block; margin: 0 auto; text-align: center; > nav width: 339px; padding: 5px; border: 1px solid black; > .scroll-container width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; > .scroll-page display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; > Result
Specifications
Browser compatibility
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on Jul 17, 2023 by MDN contributors.
Your blueprint for a better internet.
Способы добавления плавной прокрутки страницы в CSS и JavaScript
Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или посадочная страница), в которых пространство страницы разбито на части, или в больших статьях с содержанием. Такая прокрутка называется скроллингом (от англ. scroll).
Однако, это не только красиво, но и достаточно просто с точки зрения реализации.
Прокрутка страницы с помощью CSS
Для того чтобы плавная прокрутка происходила на всей странице, необходимо добавить свойство scroll-behavior: smooth для селектора html .
Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.
По умолчанию свойство scroll-behavior имеет значение auto , т.е. прокрутка будет обычной, без эффекта плавности.
Посмотрите пример, основанный на css-свойстве (открыть в новой вкладке):
Примечание: в каждом примере есть 5 ссылок вверху для прокрутки к блокам текста и ссылка со стрелкой в правом нижнем углу для возврата наверх страницы. Используйте их для тестов свойств и методов для плавного скроллинга страницы.
Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.
Поддержка свойства scroll-behavor браузерами
Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.
Скроллинг с помощью jQuery
Понятно, что для использования jQuery вам нужно будет сначала подключить эту библиотеку. Дальше нужно будет отслеживать клики по ссылкам, у которых есть хэш ( # ) и анимировать свойство scrollTop для селектора $(‘html, body’) .
Это решение является кроссбраузерным, хотя у него есть один недостаток — если на вашем сайте jQuery не используется для работы с другими объектами/плагинами, то подключать лишние 88кб или порядка 40кб в gzip-сжатом виде не очень интересно ради 10-15 строк кода.
Пример (открыть в новой вкладке):
Плавная прокрутка на JavaScript
Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.
Решение 1. Метод scrollIntoView()
Из документации на MDN узнаем, что
Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.
Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.
const links = document . querySelectorAll ( ‘a[href^=»#»]’ ) ; // все ссылки, с атрибутом href, начинающимся с «#»
К сожалению, и тут не обошлось без «ложки дегтя» в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:
Поддержка свойства scrollIntoView браузерами
К сожалению, нужное нам значение свойства behavior: ‘smooth’ поддерживается не всеми браузерами.
Кроме того, если верхняя панель навигации у нас зафиксирована, т.е. имеет свойство position: fixed , то нужно будет добавить к прокрутке смещение на ее высоту.
Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).
Решение 2. Используем window.scrollBy() для плавной прокрутки.
Тут все методы и свойства и имеют хорошую поддержку браузерами.
let links = document . querySelectorAll ( ‘a[href^=»#»]’ ) , // все ссылки, с атрибутом href, начинающимся с «#»
header = document . querySelector ( ‘header’ ) , //элемент header, который может быть спозиционирован абслютно или фиксированно
Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент ), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.
Если же шапка сайта, например фиксирована (для этого в примере есть переключатель), то отступ сверху нужен и для (задается в классе .for-fixed ), и для всех тех блоков, на которые указывают ссылки. Поэтому в переменную offsetTop мы записываем расчетную высоту .
Пример прокрутки контента с помощью window.scrollBy() (открыть в новой вкладке)).
Решение 3. Использование методов requestAnimationFrame() и window.scrollTo() для плавной прокрутки
Метод window.requestAnimationFrame() позволяет выполнить анимацию, используя в качестве параметра функцию, которая будет вызвана перед перерисовкой экрана в браузере. В примере функция имеет имя step и плавно прокручивает окно браузера к соответствующему блоку с помощью метода window.scrollTo() в зависимости от параметра velocity , который задан, как .8 .