Плавный скролл страницы: Как сделать плавный скролл (смягчение скролла) на сайте? — Хабр Q&A

scroll-behavior — CSS | MDN

scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.

Юзер-агенты могут игнорировать это свойство.

/* Ключевые значения */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Глобальные свойства */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Значения

auto

Стандартное поведение прокрутки без эффекта плавности.

smooth

Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.

Синтаксис

scroll-behavior = 
auto    | (en-US)
smooth  

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page>1</scroll-page>
  <scroll-page>2</scroll-page>
  <scroll-page>3</scroll-page>
</scroll-container>

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 {
  display: block;
  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;
}

Результат

Характеристика	Статус	Комментарий
CSS Object Model (CSSOM) View Module Определение ‘scroll-behavior’ в этой спецификации.	Рабочий черновик	Initial specification

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 13 авг. 2022 г. by MDN contributors.

Как сделать плавную прокрутку в браузере Google Chrome

Всем пользователям хорошо известно, что плавная прокрутка в Google Chrome — это что-то из области фантастики. В браузере при прокрутке страницы она ведет себя неадекватно и сильно дергается. Но есть возможность исправить эту проблему.

Содержание

• Решение
  • Включение плавной прокрутки в настройках
  • Используем расширение SmoothScroll
• Заключение

Решение

Если сравнить Хром с тем же Firefox, то в последнем прокрутка страниц происходит максимально плавно. И это положительно влияет на комфорт при работе с веб-обозревателем. А в Хроме в этом плане все очень плохо.

Непонятно, почему разработчики решили не включать эту опцию в число тех, что используются по умолчанию. Ведь плавная прокрутка страниц – это очень удобно. К тому же, браузер выглядел бы лучше в плане эстетики.

Однако все вышесказанное вовсе не значит, что разработчики не добавили эту функцию. Она есть. Но она скрыта. И поэтому в списке настроек ее найти нельзя. Тем не менее, ее можно включить. Не сказать, чтобы эффект будет сильно заметен, но качество прокрутки улучшится.

Если же требуется еще более плавная прокрутка, то для этого имеется одно весьма интересное расширение, которое легко можно найти в магазине дополнений Google Chrome. Мы обязательно рассмотрим оба варианта.

Включение плавной прокрутки в настройках

Итак, эта опция есть в самом браузере, но разработчики почему-то решили скрыть ее с глаз пользователя. Вероятно, это связано с тем, что опция пока работает не очень стабильно. Что странно, ведь в Mozilla Firefox она есть лет пять уже.

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

1. Запускаем веб-обозреватель, вводим в адресную строку текст chrome://flags/ и жмем на кнопку Enter.
2. В поле поиска вставляем #smooth-scrolling.
3. Сменяем значение для данного параметра на Enabled.
4. Затем перезапускаем браузер. Проще всего это сделать, нажав на кнопку Relaunch now.

Конечно, добиться такой же плавности, как в Firefox будет невозможно, но страница уже перестанет жутко дергаться при прокрутке. Это уже неплохо. Если начнутся какие-то сбои в работе веб-обозревателя (функция-то экспериментальная), то придется отключить опцию.

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

Используем расширение SmoothScroll

Это превосходное дополнение, которое позволяет полностью настроить поведение страницы при прокрутке. Можно выбрать скорость, уровень плавности, силу вылета за пределы экрана и прочее. Причем настраивается все очень просто. В режиме реального времени.

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

1. Открываем браузер и переходим на страницу https://chrome.google.com/webstore/detail/smoothscroll/nbokbjkabcmbfdlbddjidfmibcpneigj?hl=ru.
2. Далее щелкаем на большую синюю кнопку с надписью «Установить».
3. Соглашаемся с выполнением операции.
4. Переходим в отобразившуюся вкладку SmoothScroll Options.
5. Меняем требуемые опции.
6. Перезапускаем браузер.

Данное расширение позволяет добиться максимально плавной прокрутки страниц в Google Chrome. Работает оно превосходно. Сбоев практически никогда не случается. Если оно вам надоест, то его можно легко удалить.

Удаление происходит при помощи настроек браузера в соответствующем блоке для управления расширениями. Достаточно напротив имени плагина нажать на кнопку «Удалить» и он будет немедленно деинсталлирован.

Заключение

Итак, выше мы рассмотрели вопрос о том, как включить плавную прокрутку в Google Chrome. Лучше всего с этим справляется специальное расширение под названием SmoothScroll. Оно позволяет полностью настроить плавность прокрутки.

Но если на вашем компьютере мало оперативной памяти, то лучше воспользоваться скрытой экспериментальной опцией веб-обозревателя. Она никак не влияет на RAM. Но плавность прокрутки не сильно повышается.

scroll-behavior — CSS: каскадные таблицы стилей

Свойство CSS scroll-behavior задает поведение поля прокрутки, когда прокрутка активируется API-интерфейсами навигации или прокрутки CSSOM.

Обратите внимание, что на любые другие прокрутки, например, выполняемые пользователем, это свойство не влияет. Когда это свойство указано для корневого элемента, вместо этого оно применяется к области просмотра. Это свойство, указанное в элементе body , будет , а не распространяются на область просмотра.

Пользовательским агентам разрешено игнорировать это свойство.

 /* Значения ключевых слов */
поведение прокрутки: авто;
поведение прокрутки: гладкое;
/* Глобальные значения */
поведение прокрутки: наследовать;
поведение прокрутки: начальное;
поведение прокрутки: вернуться;
поведение прокрутки: обратный слой;
поведение прокрутки: не установлено;
 

Свойство scroll-behavior указано как одно из значений ключевого слова, перечисленных ниже.

Значения

авто

Поле прокрутки прокручивается мгновенно.

гладкая

Поле прокрутки плавно прокручивается с использованием функции синхронизации, определяемой агентом пользователя, в течение периода времени, определяемого агентом пользователя. Пользовательские агенты должны следовать соглашениям платформы, если таковые имеются.

16 Scroll-Beo-Beo-Beo-BehoHoIor =  7 
16. 
 smooth 
 Настройка поведения плавной прокрутки 
 HTML 
 
<дел>
  <дел>1
  <дел>2
  <дел>3