This page is being translated; the original is shown (Русский ).
Поведение при прокрутке
Классы scroll-over-* задают overscroll-behavior: что происходит, когда
прокручиваемая область дошла до края, а человек продолжает крутить. Берите их
для модальных окон, боковых панелей, чатов и выпадающих списков, чтобы
прокрутка внутри не уводила страницу под ними.
Пример
Прокрутите колёсиком или пальцем внутренний блок до конца и продолжайте:
с scroll-over-auto прокрутка переходит на родительскую область, с
contain и none — останавливается. Кнопка сразу ставит внутренний блок в
конец; счётчики показывают положение обеих областей.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 lg:grid-col-3 gap-3" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >scroll-over-auto</code >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка родителя: <span id ="auto-parent-value" >0</span ></div >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка дочерней области: <span id ="auto-child-value" >0</span ></div >
<button type ="button" class ="p-1 radius-ui border border-outline-variant bg-surface-0 color-on-surface js-set-child-bottom" data-target ="auto-child" >Внутренний блок — в конец</button >
<div id ="auto-parent" class ="p-2 radius-2 border border-outline-variant h-f8 overflow-auto" >
<div class ="h-f4 p-1 m-bottom-2 radius-1 bg-surface-container" >Родительская область: начало</div >
<div id ="auto-child" class ="h-f6 overflow-auto scroll-over-auto radius-1 border border-outline-variant p-1 bg-surface-0" >
<div class ="h-f3 p-1/2 m-bottom-2 bg-primary-container color-on-primary-container radius-1/2" >Дочерний блок A</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-primary-container color-on-primary-container radius-1/2" >Дочерний блок B</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-primary-container color-on-primary-container radius-1/2" >Дочерний блок C</div >
<div class ="h-f3 p-1/2 bg-primary-container color-on-primary-container radius-1/2" >Дочерний блок D</div >
</div >
<div class ="h-f8 p-1 m-top-2 radius-1 bg-surface-container" >Родительская область: при достижении края прокрутка продолжается здесь.</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >scroll-over-contain</code >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка родителя: <span id ="contain-parent-value" >0</span ></div >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка дочерней области: <span id ="contain-child-value" >0</span ></div >
<button type ="button" class ="p-1 radius-ui border border-outline-variant bg-surface-0 color-on-surface js-set-child-bottom" data-target ="contain-child" >Внутренний блок — в конец</button >
<div id ="contain-parent" class ="p-2 radius-2 border border-outline-variant h-f8 overflow-auto" >
<div class ="h-f4 p-1 m-bottom-2 radius-1 bg-surface-container" >Родительская область: начало</div >
<div id ="contain-child" class ="h-f6 overflow-auto scroll-over-contain radius-1 border border-outline-variant p-1 bg-surface-0" >
<div class ="h-f3 p-1/2 m-bottom-2 bg-secondary-container color-on-secondary-container radius-1/2" >Дочерний блок A</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-secondary-container color-on-secondary-container radius-1/2" >Дочерний блок B</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-secondary-container color-on-secondary-container radius-1/2" >Дочерний блок C</div >
<div class ="h-f3 p-1/2 bg-secondary-container color-on-secondary-container radius-1/2" >Дочерний блок D</div >
</div >
<div class ="h-f8 p-1 m-top-2 radius-1 bg-surface-container" >Родительская область: цепочка прокрутки остановлена.</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >scroll-over-none</code >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка родителя: <span id ="none-parent-value" >0</span ></div >
<div class ="text-1/2 color-on-surface-variant" >Прокрутка дочерней области: <span id ="none-child-value" >0</span ></div >
<button type ="button" class ="p-1 radius-ui border border-outline-variant bg-surface-0 color-on-surface js-set-child-bottom" data-target ="none-child" >Внутренний блок — в конец</button >
<div id ="none-parent" class ="p-2 radius-2 border border-outline-variant h-f8 overflow-auto" >
<div class ="h-f4 p-1 m-bottom-2 radius-1 bg-surface-container" >Родительская область: начало</div >
<div id ="none-child" class ="h-f6 overflow-auto scroll-over-none radius-1 border border-outline-variant p-1 bg-surface-0" >
<div class ="h-f3 p-1/2 m-bottom-2 bg-tertiary-container color-on-tertiary-container radius-1/2" >Дочерний блок A</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-tertiary-container color-on-tertiary-container radius-1/2" >Дочерний блок B</div >
<div class ="h-f3 p-1/2 m-bottom-2 bg-tertiary-container color-on-tertiary-container radius-1/2" >Дочерний блок C</div >
<div class ="h-f3 p-1/2 bg-tertiary-container color-on-tertiary-container radius-1/2" >Дочерний блок D</div >
</div >
<div class ="h-f8 p-1 m-top-2 radius-1 bg-surface-container" >Родительская область: цепочка и краевые эффекты отключены.</div >
</div >
</div >
</div >
JavaScript wrap_text Wrap source lines content_copy Copy
function bindScrollIndicator (scrollerId , valueId ) {
var scroller = document.getElementById (scrollerId);
var value = document.getElementById (valueId);
if (! scroller || ! value) return ;
function update () {
value.textContent = String (Math.round (scroller.scrollTop));
}
scroller.addEventListener ('scroll' , update, { passive: true });
update ();
}
function setChildToBottom (childId ) {
var child = document.getElementById (childId);
if (! child) return ;
child.scrollTop = child.scrollHeight;
}
function initOverscrollDemo () {
var buttons = document.querySelectorAll ('.js-set-child-bottom' );
buttons.forEach (function (button ) {
button.addEventListener ('click' , function () {
var target = button.getAttribute ('data-target' );
if (! target) return ;
setChildToBottom (target);
});
});
bindScrollIndicator ('auto-parent' , 'auto-parent-value' );
bindScrollIndicator ('contain-parent' , 'contain-parent-value' );
bindScrollIndicator ('none-parent' , 'none-parent-value' );
bindScrollIndicator ('auto-child' , 'auto-child-value' );
bindScrollIndicator ('contain-child' , 'contain-child-value' );
bindScrollIndicator ('none-child' , 'none-child-value' );
}
if (document.readyState === 'loading' ) {
document.addEventListener ('DOMContentLoaded' , initOverscrollDemo);
} else {
initOverscrollDemo ();
}
Классы
Класс
CSS
Значения
scroll-over-auto-ms-scroll-chaining: chained; overscroll-behavior: auto—
scroll-over-x-autooverscroll-behavior-x: auto—
scroll-over-y-autooverscroll-behavior-y: auto—
scroll-over-contain-ms-scroll-chaining: none; overscroll-behavior: contain—
scroll-over-x-containoverscroll-behavior-x: contain—
scroll-over-y-containoverscroll-behavior-y: contain—
scroll-over-none-ms-scroll-chaining: none; overscroll-behavior: none—
scroll-over-x-noneoverscroll-behavior-x: none—
scroll-over-y-noneoverscroll-behavior-y: none—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор значения
Класс
Что происходит у края
scroll-over-autoпрокрутка переходит на родителя — поведение браузера по умолчанию
scroll-over-containпрокрутка остаётся в области; эффекты у края (отскок, свечение) сохраняются
scroll-over-noneпрокрутка остаётся в области, эффектов у края нет
Обычно хватает scroll-over-contain: страница под окном не двигается, а
отклик у края остаётся привычным.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="max-h-f4 overflow-auto scroll-over-contain" >
<!-- содержимое панели -->
</div >
Одна ось
Классы scroll-over-x-* и scroll-over-y-* задают поведение только по
горизонтали или по вертикали. Например, горизонтальная лента не уводит
страницу вбок, но вертикальная прокрутка через неё проходит:
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex overflow-auto scroll-over-x-contain" >
<!-- карточки ленты -->
</div >
scroll-over-none на корневом элементе отключает жест «потянуть для
обновления» в мобильных браузерах.
Ограничения
Класс действует только на прокручиваемый элемент: без overflow-auto или
overflow-scroll ему нечего ограничивать.
Свойство не мешает прокрутке скриптом и переходу по якорю.
У семейства нет префиксов ширины экрана и состояния.
См. также
Предыдущая Плавность прокрутки Следующая Цвет подложки прокрутки
