Вступление
Содержание статьи:
Возьмем очень распространенную проблему. У нас есть модальный диалог, расположенный в центре области просмотра. Под этим модальным окном находится фактическое содержимое веб-страницы.
Когда мы дойдем до конца модального содержимого, браузер вместо этого продолжит прокрутку содержимого главной страницы. Это называется цепной прокруткой . Это поведение по умолчанию, которое теперь можно переопределить с помощью нового свойства CSS с именем 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: auto:
overscroll-behavior: contain
Судя по названию, значение contain будет содержать прокрутку внутри границы элемента. На рисунке ниже прокрутка находится внутри обведенной синим контуром оболочки.
Вот видео, которое демонстрирует поведение overscroll-behavior: contain:
overscroll-behavior: none
Когда установлено значение none, будет эффект, аналогичный contain, с дополненым предотвращением эффекта отскока при достижении верха или низа страницы.
Варианты использования и примеры
Теперь, когда у вас есть представление о том, как работает overscroll-behavior, давайте рассмотрим несколько полезных вариантов использования.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Мобильная навигация
Когда мобильная навигация слишком длинная, слишком быстрая прокрутка может вызвать проблемы с цепочкой прокрутки основного содержимого. На следующем рисунке представлен длинный список навигации с возможностью прокрутки.
Прокрутка навигации также приведет к прокрутке содержимого тела страницы. Мы можем избежать этого:
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, когда у вас есть боковая панель и основной раздел. В этом случае боковая панель фиксирована и может быть прокручиваемой, если ее содержимое слишком длинное.
Чтобы избежать прокрутки основного раздела при достижении конечной границы боковой панели, нам нужно добавить следующее:
CSS .aside { overscroll-behavior-y: contain; }
| 123 | .aside { overscroll-behavior-y: contain;} |
Компонент чата
Компонент чата является идеальным вариантом использования overscroll-behavior. Мы можем использовать его, чтобы избежать прокрутки тела, когда дойдем до его конца.
CSS .aside { overscroll-behavior-y: contain; }
| 123 | .aside { overscroll-behavior-y: contain;} |
Модальное содержимое
Первый пример, который я привел в статье, является модальным, поэтому я не буду его повторять. Однако бывают случаи, когда нам может понадобиться список в модальном окне, и когда этот список прокручивается, мы не хотим, чтобы выполнялась цепочка прокрутки.
Обратите внимание на список параметров в модальном окне. Это прокручиваемый список. Если мы дойдем до его границы, модальное содержимое будет прокручиваться. Чтобы этого избежать, мы можем использовать 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-x.
CSS .list { overscroll-behavior-x: contain; }
| 123 | .list { overscroll-behavior-x: contain;} |
Заключение
Свойство CSS overscroll-behavior очень полезное, решающее проблему, для которой мы использовали хакерские решения несколько лет назад. Надеюсь, что вы узнали что-то новое из этой статьи.
Автор: Ahmad Shadeed
Источник: webformyself.com