CSS overscroll-behavior — зупинити прокрутку на краю блока

CSS властивість overscroll-behavior каже, що робити, коли прокрутка дійшла до краю блока: тягнути далі батьківський контейнер чи зупинитись.

правити

Загальний опис

Типова прикрість: докрутив список у модальному вікні до кінця, колесо крутиться далі — і поїхала вся сторінка під вікном. Це називається scroll chaining, і саме його вимикає overscroll-behavior: contain.

Значення none йде далі: крім ланцюжка, воно вимикає й ефекти краю — «гумове» відтягування на мобільних і жест «потягни вниз, щоб оновити» в браузері. Останнє критично для застосунків із власним жестом оновлення.

Ставиться властивість на прокручуваний блок (модальне вікно, чат, бічну панель), а не на сторінку.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	144	150	16*	128	18	—

Підтримка: мобільні переглядачі

Переглядач
	144	144	150	16*

Приклади

+ запропонувати свій приклад у пісочниці

<div class="panel">
    <p>Рядок 1</p><p>Рядок 2</p><p>Рядок 3</p>
    <p>Рядок 4</p><p>Рядок 5</p><p>Рядок 6</p>
</div>
<p style="height:80vh">Вміст сторінки…</p>

.panel {
    height: 120px;
    overflow-y: auto;
    border: 1px solid #0172ad;
    /* край списку не тягне за собою сторінку */
    overscroll-behavior: contain;
}