Предотвращение цепной прокрутки с помощью overscroll-behavior

0 213

Вступление

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

Предотвращение цепной прокрутки с помощью overscroll-behavior

Когда мы дойдем до конца модального содержимого, браузер вместо этого продолжит прокрутку содержимого главной страницы. Это называется цепной прокруткой . Это поведение по умолчанию, которое теперь можно переопределить с помощью нового свойства CSS с именем overscroll-behavior.

Предотвращение цепной прокрутки с помощью overscroll-behavior

Предотвращение цепной прокрутки с помощью overscroll-behavior

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Старое Хакерское Решение

Раньше мы исправляли это, применяя overflow:hidden к элементу body. Когда модальное окно открывается, мы добавляем в тело класс, который отвечает за применение переполнения.

CSS body.modal-open { overflow: hidden; } .modal.is-open { display: block; }

1234567 body.modal-open {    overflow: hidden;} .modal.is-open {    display: block;}

Раньше это решение отлично работало, но Safari на iOS это не нравилось. Чтобы оно заработало, нам также нужно добавить position:fixed к элементу body.

CSS body.modal-open { position: fixed; overflow: hidden; } .modal.is-open { display: block; }

12345678 body.modal-open {    position: fixed;    overflow: hidden;} .modal.is-open {    display: block;}

Это работает, но при этом в браузере будет работать прокрутка вверх, отвлекая пользователя от текущей задачи. Это исправление, которое приводит к другим проблемам. Я не знаю решения такой задачи, кроме предложенного Беном Фрейном в этой статье.

Согласно предложению в статье Бена, следующий код должен быть добавлен в элемент body после того, как модальное окно станет активным.

CSS .bg-scrolling-element-when-modal-active { /* when modal active */ touch-action: none; -webkit-overflow-scrolling: none; overflow: hidden; /* Other browsers */ overscroll-behavior: none; }

12345678 .bg-scrolling-element-when-modal-active {    /* when modal active */    touch-action: none;    -webkit-overflow-scrolling: none;    overflow: hidden;    /* Other browsers */    overscroll-behavior: none;}

Помню, когда я работал над клиентским проектом в 2018 году, тогда я сказал клиенту, что мы не можем предотвратить прокрутку тела страницы для мобильного меню на iOS. Он ответил: .

CSS в этом случае относится к «программированию». Я продолжал много пытаться и исследовать, но не находил идеального решения. Я хочу вернуться в прошлое и использовать overscroll-behavior для решения.

Представляем оverscroll-behavior

Свойство оverscroll-behavior указывает браузеру, что он должен сделать, когда мы достигнем границы области прокрутки. Он поддерживается во всех основных браузерах, кроме Safari. Это свойство является сокращением от overscroll-behavior-x и overscroll-behavior-y.

Обратите внимание, что при настройке overscroll-behavior будут установлены обе оси. Давайте рассмотрим возможные значения.

overscroll-behavior: auto

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

Предотвращение цепной прокрутки с помощью overscroll-behavior

Вот видео, которое демонстрирует поведение overscroll-behavior: auto:

overscroll-behavior: contain

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

Предотвращение цепной прокрутки с помощью overscroll-behavior

Вот видео, которое демонстрирует поведение overscroll-behavior: contain:

overscroll-behavior: none

Когда установлено значение none, будет эффект, аналогичный contain, с дополненым предотвращением эффекта отскока при достижении верха или низа страницы.

Варианты использования и примеры

Теперь, когда у вас есть представление о том, как работает overscroll-behavior, давайте рассмотрим несколько полезных вариантов использования.

Предотвращение цепной прокрутки с помощью overscroll-behavior

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Мобильная навигация

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

Предотвращение цепной прокрутки с помощью overscroll-behavior

Прокрутка навигации также приведет к прокрутке содержимого тела страницы. Мы можем избежать этого:

CSS .nav { overscroll-behavior-y: contain; overflow-y: auto; }

1234 .nav {    overscroll-behavior-y: contain;    overflow-y: auto;}

Посмотрим видео. Я добавил полупрозрачный фон для навигации, чтобы мы могли видеть под ней. Обратите внимание, как ведет себя прокрутка, когда я выключаю свойство overscroll-behavior.

При выключении будет происходить прокрутка тела страницы. Однако следует иметь в виду, что, когда навигация короткая (и, следовательно, не прокручивается), а пользователь пытается прокрутить ее, тело страницы будет прокручиваться, даже если установлено свойство overscroll-behavior-y:contain.

К сожалению, я не знаю, как исправить это, кроме «хаков», представленных в начале статьи.

Навигация по страницам

Еще одно полезное использование overscroll-behavior, когда у вас есть боковая панель и основной раздел. В этом случае боковая панель фиксирована и может быть прокручиваемой, если ее содержимое слишком длинное.

Предотвращение цепной прокрутки с помощью overscroll-behavior

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

CSS .aside { overscroll-behavior-y: contain; }

123 .aside {    overscroll-behavior-y: contain;}

Компонент чата

Предотвращение цепной прокрутки с помощью overscroll-behavior

Компонент чата является идеальным вариантом использования overscroll-behavior. Мы можем использовать его, чтобы избежать прокрутки тела, когда дойдем до его конца.

CSS .aside { overscroll-behavior-y: contain; }

123 .aside {    overscroll-behavior-y: contain;}

Модальное содержимое

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

Предотвращение цепной прокрутки с помощью overscroll-behavior

Обратите внимание на список параметров в модальном окне. Это прокручиваемый список. Если мы дойдем до его границы, модальное содержимое будет прокручиваться. Чтобы этого избежать, мы можем использовать overscroll-behavior.

CSS .list-wrapper { overscroll-behavior-y: contain; overflow-y: auto; max-height: 130px; }

12345 .list-wrapper {    overscroll-behavior-y: contain;    overflow-y: auto;    max-height: 130px;}

Горизонтальный список

Я заметил этот вариант использования на домашней странице Facebook. Есть раздел со списком пользователей, который прокручивается по горизонтали, как видите на рисунке ниже.

Предотвращение цепной прокрутки с помощью overscroll-behavior

Это хороший пример использования overscroll-behavior-x.

CSS .list { overscroll-behavior-x: contain; }

123 .list {    overscroll-behavior-x: contain;}

Заключение

Свойство CSS overscroll-behavior очень полезное, решающее проблему, для которой мы использовали хакерские решения несколько лет назад. Надеюсь, что вы узнали что-то новое из этой статьи.

Автор: Ahmad Shadeed

Источник: webformyself.com

Оставьте ответ

Ваш электронный адрес не будет опубликован.