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

Начиная с Chrome 81, вам больше не нужно добавлять прослушиватели событий для принудительной повторной привязки.

Адам Аргайл
Каан Алсан
Kaan Alsan
И Гу

CSS Scroll Snap позволяет веб-разработчикам создавать хорошо контролируемые возможности прокрутки, объявляя позиции привязки прокрутки. Одним из недостатков текущей реализации является то, что привязка прокрутки не работает должным образом при изменении макета, например, при изменении размера области просмотра или повороте устройства. Этот недостаток исправлен в Chrome 81.

Совместимость

Многие браузеры имеют базовую поддержку CSS Scroll Snap. См . «Могу ли я использовать CSS Scroll Snap?» для получения дополнительной информации.

Chrome в настоящее время является единственным браузером, реализующим привязку прокрутки после изменения макета. У Firefox есть открытый билет для реализации этого, а у Safari также есть открытый билет для повторной привязки после изменения содержимого скроллера. На данный момент вы можете смоделировать это поведение, добавив следующий код в прослушиватели событий, чтобы принудительно выполнить привязку: javascript scroller.scrollBy(0,0); Однако это не гарантирует, что скроллер вернется к тому же элементу.

Фон

CSS-прокрутка

Функция CSS Scroll Snap позволяет веб-разработчикам создавать хорошо контролируемые возможности прокрутки, объявляя позиции привязки прокрутки. Эти позиции гарантируют, что прокручиваемый контент будет правильно выровнен с его контейнером, чтобы устранить проблемы неточной прокрутки. Другими словами, привязка прокрутки:

  • Предотвращает неудобные положения прокрутки при прокрутке.
  • Создает эффект листания контента.

Статьи с разбивкой на страницы и карусели изображений — два распространенных варианта использования привязок к прокрутке.

Пример привязки прокрутки CSS.
Пример привязки прокрутки CSS. В конце прокрутки горизонтальный центр изображения выравнивается с горизонтальным центром контейнера прокрутки.

Недостатки

Позиции привязки теряются при изменении размера окна.

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

  • Изменение размера окна
  • Вращение устройства
  • Открытие инструментов разработчика

Первые два сценария делают CSS Scroll Snap менее привлекательным для пользователей, а третий — кошмаром для разработчиков при отладке. Разработчикам также необходимо учитывать эти недостатки при попытке создать динамический интерфейс, поддерживающий такие действия, как добавление, удаление или перемещение контента.

Распространенным решением этой проблемы является добавление прослушивателей, которые выполняют программную прокрутку через JavaScript, чтобы принудительно выполнять привязку всякий раз, когда происходит любое из этих упомянутых изменений макета. Этот обходной путь может быть неэффективным, если пользователь ожидает, что скроллер вернется к тому же содержимому, что и раньше. Любая дальнейшая обработка с помощью JavaScript, похоже, практически сводит на нет цель этой функции CSS.

Встроенная поддержка повторной привязки после изменения макета в Chrome 81.

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

Позиция привязки потеряна
Поворот устройства не сохраняет позиции привязки в Chrome 80. После прокрутки к слайду с надписью NOPE и изменения ориентации устройства с книжной на альбомную отображается пустой экран, что указывает на потерю позиции привязки прокрутки.
Положение привязки сохранено
При повороте устройства позиции привязки в Chrome 81 сохраняются. Слайд с надписью NOPE остается в поле зрения, даже если ориентация устройства меняется несколько раз.

Дополнительные сведения см . в спецификации «Повторная привязка после изменения макета» .

Пример: липкие полосы прокрутки

С помощью «Привязки после изменения макета» разработчики могут реализовать липкие полосы прокрутки с помощью нескольких строк CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

Хотите узнать больше? См. следующий демонстрационный интерфейс чата для визуальных эффектов.

Добавление нового сообщения вызывает повторную привязку, в результате чего оно прилипает внизу в Chrome 81.

Будущая работа

Все эффекты повторной прокрутки в настоящее время являются мгновенными; потенциальным продолжением является поддержка повторной привязки с эффектами плавной прокрутки . Подробности смотрите в выпуске спецификации .

Обратная связь

Ваши отзывы неоценимы для улучшения повторной привязки после изменений макета, так что продолжайте, попробуйте и расскажите инженерам Chromium, что вы думаете.