overscroll-behavior
Zapobiega przewijaniu całej strony po dojściu do końca przewijanego elementu.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery przewijania
- JavaScript
element.style.overscrollBehavior = "contain"
Przykład
#.chat-messages {
max-height: 320px;
overflow-y: auto;
overscroll-behavior: contain;
}<p style="margin: 0; color: #a3a3a3;">Okno czatu przewija się niezależnie od strony, nawet gdy dojdziesz do najstarszej wiadomości.</p>Definicja i zastosowanie
#Gdy przewijasz listę wewnątrz strony i dojdziesz do jej końca, dalsze przewijanie domyślnie przechodzi na stronę pod spodem. To zjawisko to łańcuchowanie przewijania. Właściwość overscroll-behavior: contain je zatrzymuje.
Przydaje się w oknach czatu, rozwijanych menu, panelach bocznych i modalach: przewijanie ich treści nie przesuwa strony w tle.
Wartość none dodatkowo wyłącza efekty przewijania za krawędź, na przykład odbicie na iPhonie albo odświeżanie strony gestem przeciągnięcia w dół na Androidzie.
Składnia
#overscroll-behavior: auto | contain | none (1–2 wartości);Wartości
#Wartości w praktyce
#auto
.demo { overscroll-behavior: auto; }contain
.demo { overscroll-behavior: contain; }none
.demo { overscroll-behavior: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Każdy przewijany panel w modalu powinien mieć
overscroll-behavior: contain. - Ustawienie
nonena elemenciebodywyłącza odświeżanie strony gestem w aplikacjach webowych.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.