Google is committed to advancing racial equity for Black communities. See how.

Плавная прокрутка в Chrome 49

scroll,chrome49 #}

Если и есть вещь, которую люди действительно хотят от прокрутки - это чтобы она была плавной. Исторически Chrome имел плавную прокрутку в некоторых местах, например, когда пользователи использовали свои трекпады или листали страницы на мобильных устройствах. Но если у пользователя подключена мышь, он получит более дёрганое «пошаговое» поведение при прокрутке, что не так эстетично. Это всё вот-вот изменится в Chrome 49.

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

  • Эффект «зловещей долины» Это проявляется двумя способами: во-первых, у одного сайта может быть плавная прокрутка, а у другого - нет, поэтому пользователь может почувствовать себя дезориентированным из-за несогласованности. Во-вторых, физика гладкости библиотеки не обязательно будет соответствовать физике платформы. Таким образом, хотя движение может быть плавным, оно может быть неправильным или странным.
  • Повышенная склонность к "заморозке" и рывка основного потока. Как и в случае с любым JavaScript, добавленным на страницу, будет повышенная загрузка процессора. Это не обязательно катастрофа, в зависимости от того, что еще делает страница, но если в главном потоке выполняется длительная работа, а прокрутка связана с основным потоком, то в результате могут получиться заикания и рывки.
  • Больше обслуживания для разработчиков, больше кода для загрузки пользователями. Наличие библиотеки для плавной прокрутки - это то, что нужно постоянно обновлять и поддерживать, и это увеличит общий вес страницы сайта.

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

В Chrome 49 поведение прокрутки по умолчанию будет меняться в Windows, Linux и Chrome OS. Старый пошаговый режим прокрутки исчезает, и по умолчанию прокрутка будет плавной! Никаких изменений в вашем коде не требуется, за исключением, возможно, удаления любых библиотек с плавной прокруткой, если вы их использовали.

Ещё вкусности прокрутки

Есть и другие вкусности, связанные с прокруткой, о которых стоит упомянуть. Многим из нас нужны эффекты с прокруткой, такие как параллакс, плавная прокрутка к фрагменту документа (например, example.com/ #somesection ). Как я упоминал ранее, подходы, которые используются сегодня, часто могут нанести ущерб как разработчикам, так и пользователям. Есть два стандарта платформы, над которыми мы работаем, которые могут помочь: Compositor Worklets и свойство CSS scroll-behavior .

Houdini

Композитор Worklets являются частью Houdini , и его еще предстоит полностью определить и внедрить. Тем не менее, когда патчи появятся, они позволят вам написать JavaScript, который выполняется как часть конвейера композитора, что в целом означает, что эффекты, связанные с прокруткой, такие как параллаксинг, будут идеально синхронизированы с текущей позицией прокрутки. Учитывая способ, которым прокрутка обрабатывается сегодня, когда события прокрутки только периодически отправляются в основной поток (и могут быть заблокированы другой работой основного потока), это будет представлять собой огромный скачок вперед. Если вас интересуют Compositor Worklets или какие-либо другие интересные новые функции, которые предлагает Houdini, просмотрите сообщение Intro to Houdini от Surma , спецификации Houdini и поделитесь своими мыслями в списке рассылки Houdini !

scroll-behavior

Когда дело доходит до прокрутки на основе фрагментов, CSS-свойство scroll-behavior может помочь в этом. Если вы хотите попробовать его, вам будет приятно узнать, что он уже поставляется в Firefox, и вы можете включить его в Chrome Canary с помощью флага «Включить экспериментальные функции веб-платформы» . Если вы установите, скажем, элемент <body> на scroll-behavior: smooth , все scroll-behavior: smooth , которые запускаются либо при изменении фрагмента, либо при помощи {code6}window.scrollTo{/code6} будут плавно анимироваться! Это намного лучше, чем использовать и поддерживать код из библиотеки, которая пытается сделать то же самое. С такой фундаментальной вещью, как прокрутка, очень важно не нарушать ожидание пользователя, поэтому, хотя эти функции постоянно меняются, все же стоит принять подход прогрессивного улучшения и удалить все библиотеки, которые пытаются полифиллировать такое поведение.

Идите и прокрутите

Начиная с Chrome 49, прокрутка становится более плавной. Но это еще не все: есть и другие потенциальные улучшения, которые могут появиться благодаря свойствам Houdini и CSS, таким как smooth-scroll . Попробуйте Chrome 49, дайте нам знать, что вы думаете, и, прежде всего, дайте браузеру прокрутить, где вы можете!