03.12.2021

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

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

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

Вступление

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

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

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

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

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

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

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

CSS

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

CSS

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

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

CSS

Помню, когда я работал над клиентским проектом в 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

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

CSS

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

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

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

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

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

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

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

CSS

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

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

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

CSS

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

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

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

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

CSS

Горизонтальный перечень

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

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

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

CSS

Заключение

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *