Если есть что-то, чего люди действительно хотят от прокрутки, так это чтобы она была плавной. Исторически Chrome имел плавную прокрутку в некоторых местах, например, когда пользователи прокручивают страницы с помощью трекпада или перебрасывают страницу на мобильном устройстве. Но если у пользователя подключена мышь, он получит более нервную «ступенчатую» прокрутку, что гораздо менее эстетично. В Chrome 49 все изменится.
Решением проблемы ступенчатого поведения прокрутки, управляемой вводом, для многих разработчиков было использование библиотек, цель которых — переназначить его во что-то более плавное и приятное для глаз. Пользователи также делают это с помощью расширений. Однако как у библиотек, так и у расширений, изменяющих прокрутку, есть свои недостатки:
- Ощущение жуткой долины. Это проявляется двояко: во-первых, на одном сайте может быть плавная прокрутка, а на другом — нет, поэтому пользователь может в конечном итоге почувствовать себя дезориентированным из-за несогласованности. Во-вторых, физика плавности библиотеки не обязательно будет соответствовать физике платформы. Поэтому, хотя движение может быть плавным, оно может показаться неправильным или странным.
- Повышенная склонность к конфликтам и блокировке основного потока. Как и в случае любого JavaScript, добавленного на страницу, будет увеличена нагрузка на процессор. Это не обязательно является катастрофой, в зависимости от того, что еще делает страница, но если в основном потоке выполняется какая-то длительная работа и прокрутка связана с основным потоком, конечным результатом могут быть заикания при прокрутке и зависания.
- Больше поддержки для разработчиков, больше кода для загрузки пользователями. Наличие библиотеки для плавной прокрутки необходимо поддерживать в актуальном состоянии и поддерживать, и это увеличит общий вес страницы сайта.
Эти недостатки часто справедливы и для многих библиотек, которые имеют дело с поведением прокрутки, будь то эффекты параллакса или другие анимации, связанные с прокруткой. Они слишком часто вызывают зависания, мешают доступности и в целом вредят пользовательскому опыту. Прокрутка — это основное взаимодействие в Интернете, и ее изменение с помощью библиотек следует выполнять с большой осторожностью.
В Chrome 49 поведение прокрутки по умолчанию будет меняться в Windows, Linux и ChromeOS. Старое ступенчатое поведение прокрутки исчезнет, и по умолчанию прокрутка будет плавной! Никаких изменений в вашем коде не требуется, за исключением, возможно, удаления любых библиотек плавной прокрутки, если вы их использовали.
Еще больше вкусностей с прокруткой
В работе есть и другие вкусности, связанные со свитками, о которых также стоит упомянуть. Многим из нас нужны эффекты, связанные с прокруткой, такие как параллакс, плавная прокрутка к фрагменту документа (например, example.com/ #somesection ). Как я упоминал ранее, подходы, которые используются сегодня, часто могут нанести вред как разработчикам, так и пользователям. В настоящее время разрабатываются два стандарта платформы, которые могут помочь: Compositor Worklets и CSS-свойство scroll-behavior .
Гудини
Compositor Worklets являются частью Houdini и еще не полностью определены и реализованы. Тем не менее, по мере выхода патчей они позволят вам писать JavaScript, который запускается как часть конвейера композитора, что в целом означает, что эффекты, связанные с прокруткой, такие как параллакс, будут полностью синхронизированы с текущей позицией прокрутки. Учитывая то, как сегодня обрабатывается прокрутка, когда события прокрутки лишь периодически отправляются в основной поток (и могут быть заблокированы работой другого основного потока), это было бы огромным шагом вперед. Если вы заинтересованы в Compositor Worklets или любых других интересных новых функциях, которые предлагает Houdini, просмотрите пост «Введение в Houdini» от Surma , спецификации Houdini и поделитесь своими мыслями в списке рассылки Houdini !
поведение прокрутки
Когда дело доходит до прокрутки на основе фрагментов, CSS-свойство scroll-behavior может помочь. Если вы хотите опробовать его, вам будет приятно узнать, что он уже включен в Firefox, и вы можете включить его в Chrome Canary, используя флаг «Включить экспериментальные функции веб-платформы» . Если вы установите, скажем, для элемента <body> значение scroll-behavior: smooth , все прокрутки, которые запускаются либо изменениями фрагмента, либо window.scrollTo , будут анимированы плавно! Это намного лучше, чем использовать и поддерживать код из библиотеки, которая пытается сделать то же самое. Что касается такой фундаментальной вещи, как прокрутка, очень важно не нарушать ожиданий пользователей, поэтому, хотя эти функции постоянно меняются, все равно стоит принять подход прогрессивного улучшения и удалить все библиотеки, которые пытаются полифилировать это поведение.
Иди и пролистай
Начиная с Chrome 49, прокрутка становится более плавной. Но это еще не все: есть и другие потенциальные улучшения, которые могут быть реализованы благодаря Houdini и свойствам CSS, таким как smooth-scroll . Попробуйте Chrome 49, дайте нам знать, что вы думаете, и, самое главное, позвольте браузеру выполнять прокрутку там, где вы можете!