Как предотвратить цепочку прокрутки с помощью свойства поведения overscroll в CSS
Предположим, что у нас есть элемент с position: fixed. Если у него есть прокрутка, вы заметите, что когда вы достигнете нижней границы элемента, браузер продолжит прокрутку элемента body. Это нежелательный и сбивающий с толку эффект. К счастью, мы можем исправить это с помощью CSS.
В этой статье мы рассмотрим свойство CSS overscroll-behavior, какую проблему оно решает, как оно работает и где мы можем его использовать.
Введение
Возьмем очень распространенную проблему. У нас есть модальное диалоговое окно, расположенное в центре области просмотра. Под этим модальным окном находится фактическое содержимое веб-страницы.
Когда мы дойдем до конца модального содержимого, браузер вместо этого продолжит прокрутку содержимого главной страницы. Это называется цепочкой прокрутки. Это поведение по умолчанию, которое теперь можно переопределить с помощью нового свойства CSS, называемого overscroll-behavior.
Такое поведение часто не требуется и может отвлечь пользователя от просмотра модального содержимого. На рисунке выше обратите внимание, как, когда мы достигли конца модального окна, страница продолжала прокручиваться.
Старое, хакерское решение
Раньше мы исправляли это, применяя overflow: hidden к элементу body с помощью Javascript. При открытии модального окна мы добавляем в тело класс, отвечающий за применение переполнения.
body.modal-open {
overflow: hidden;
}
.modal.is-open {
display: block;
}
Раньше это решение отлично работало в настольных браузерах, но Safari на iOS это не понравилось. Чтобы это работало, нам также нужно добавить position: fixed к элементу body.
body.modal-open {
position: fixed;
overflow: hidden;
}
.modal.is-open {
display: block;
}
Это работает, но браузер будет прокручиваться вверх, отвлекая пользователя от текущей задачи. Это исправление, которое вводит другие проблемы. Я не знаю решения для этого, кроме закрепленного в этой статье (benfrain.com/preventing-body-scroll-for-modals-in-ios) Бена Фрейна.
Согласно фрагменту в статье Бена, после активации модального окна в элемент body следует добавить следующее.
.bg-scrolling-element-when-modal-active {
/* when modal active */
touch-action: none;
-webkit-overflow-scrolling: none;
overflow: hidden;
/* Other browsers */
overscroll-behavior: none;
}
«Программирование» в этом случае относится к CSS, если вам интересно. Я продолжал пробовать и исследовать много, но без идеального решения. Я хочу вернуться в прошлое и ввести в решение поведение overscroll.
Знакомство с overscroll-behavior
Свойство overscroll-behavior определяет, что должен делать браузер, когда мы достигаем границы области прокрутки. Он поддерживается во всех основных браузерах, кроме Safari. Свойство является сокращением для overscroll-behavior-x и overscroll-behavior-y.
Учтите, что установка overscroll-behavior установит обе оси. Перейдем к возможным значениям.
overscroll-behavior: auto
Значение по умолчанию — auto, что разрешает цепочку прокрутки. Когда у нас есть прокручиваемый элемент и мы достигаем его границы, браузер продолжит прокрутку содержимого body.
А вот видео, где это видно лучше:
overscroll-behavior: contain
Судя по его имени, значение будет содержать contain прокрутку в пределах границы элемента. На рисунке ниже свиток заключен в оболочку с синим контуром.
А вот видео, где это видно лучше:
overscroll-behavior: none
Если установлено значение none, оно действует так же, как и значение contain, **кроме того**, чтобы предотвратить эффект отскока при достижении верхней или нижней части страницы.
Варианты использования и примеры
Теперь, когда у вас есть представление о том, как работает overscroll-behavior, давайте рассмотрим несколько полезных вариантов использования.
Мобильная навигация
Когда мобильная навигация слишком длинная, слишком быстрая прокрутка может привести к цепочке прокрутки основного содержимого. На следующем рисунке у нас есть длинный прокручиваемый список навигации.
Если прокрутка не содержится, это также приведет к прокрутке содержимого тела. Мы можем избежать этого.
.nav {
overscroll-behavior-y: contain;
overflow-y: auto;
}
Давайте посмотрим это на видео. Я добавил полупрозрачный фон, чтобы навигация могла видеть под ним. Обратите внимание, как он ведет себя, когда я отключаю свойство overscroll-behavior-y.
При отключении происходит прокрутка тела.
Тем не менее, следует иметь в виду, что когда навигация короткая (и, следовательно, не может быть прокручена), и пользователь пытался прокручивать без причины, тело будет прокручиваться, даже если установлено overscroll-behavior-y: .
К сожалению, мне неизвестно какое-либо исправление для этого, кроме «хаков», представленных в начале статьи.
Боковая навигация
Еще одно полезное использование overscroll-behavior — когда у вас есть боковая панель и главная. В этом случае боковая панель фиксируется, и ее можно прокручивать, если ее содержимое слишком длинное.
Чтобы избежать прокрутки основного раздела при достижении конечной границы боковой панели, нам нужно добавить следующее:
.aside {
overscroll-behavior-y: contain;
}
Компонент чата
Вдохновленный Facebook, компонент чата является идеальным вариантом использования overscroll-behavior. Мы можем использовать его, чтобы избежать прокрутки тела, когда мы доходим до его конца.
.aside {
overscroll-behavior-y: contain;
}
Модальное содержимое
Первый пример, который я привел в статье, модальный, поэтому я не буду его повторять. Однако бывают случаи, когда нам может понадобиться список в модальном окне, и когда этот список можно прокручивать, нам не нужна цепочка прокрутки.
Обратите внимание на список опций в модальном окне. Это прокручиваемый список. Если мы достигнем его границы, модальное содержимое будет прокручиваться. Чтобы избежать этого, мы можем использовать overscroll-behavior.
.list-wrapper {
overscroll-behavior-y: contain;
overflow-y: auto;
max-height: 130px;
}
Горизонтальный список
Я заметил этот вариант использования на главной странице Facebook. Есть раздел со списком пользователей, и он прокручивается горизонтально, как показано на рисунке ниже.
Это хорошее использование для overscroll-behavior-x.
.list {
overscroll-behavior-x: contain;
}
Заключение
CSS overscroll-behavior — это полезное свойство, которое решает проблему, которую мы использовали несколько лет назад. Я надеюсь, что вы узнали что-то новое из этой статьи.
Ссылка на автора - twitter.com/shadeed9 !
