Atrybut overscroll-behavior w CSS

Definicja i użycie

overscroll-behavior Atrybuty do wyłączenia dźwigni przewijania (scroll chaining) lub nadmiernego przewijania (overscroll affordance) elementu podczas próby przewijania poza granice przewijania.

Dźwignia przewijania: gdy nadmiernie przewijamy element, prowadzi to do zachowania przewijania elementu nadrzędnego. Jest to zachowanie domyślne.

Odpowiedź na nadmierny przewijanie: informacja dostarczana użytkownikowi, gdy próbują przewijać poza granice przewijania. Na przykład, podczas próby przewijania poza górę strony na urządzeniu przenośnym, zazwyczaj wyświetla się wizualna informacja i odświeża stronę.

overscroll-behavior Atrybut jest uproszczoną formą poniższych atrybutów:

overscroll-behavior Wartości atrybutu można ustawić na różne sposoby:

Jeśli atrybut overscroll-behavior ma dwie wartości:

overscroll-behavior: none contain;
  • Kierunek x: brak zachowania over-scroll
  • Kierunek y: brak łańcucha przewijania, ale pozwala na feedback over-scroll

Jeśli atrybut overscroll-behavior ma jedną wartość:

overscroll-behavior: contain;
  • Kierunki x i y: brak łańcucha przewijania, ale pozwala na feedback over-scroll

Przykład

Przykład 1

Zamknij łańcuch przewijania dla elementu <div> skalowanego:

#yellowDiv {
  overscroll-behavior: contain;
}

Spróbuj sam

Przykład 2: Syntax dwuwartościowy:

Ustaw: overscroll-behavior Wartość atrybutu ustawiona na auto nonePozwala na łańcuch przewijania i feedback over-scroll w kierunku x, ale nie w kierunku y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Spróbuj sam

CSS syntax

overscroll-behavior: auto|contain|none|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Pozwala na zachowanie łańcucha przewijania i feedback over-scroll. Domyślna wartość.
contain Pozwala na feedback over-scroll, ale nie pozwala na zachowanie łańcucha przewijania.
none Nie pozwala na feedback over-scroll lub zachowanie łańcucha przewijania.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Przekazuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty związane z animacjami.
Wersja: CSS3
JavaScript syntax: object.style.overscrollBehavior="none"

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni wspierają tę właściwość.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* W Microsoft Edge wartość 'none' jest traktowana jako 'contain', co jest niewłaściwe.

Strony związane

Odniesienie:Atrybut overscroll-behavior-x w CSS

Odniesienie:Atrybut overscroll-behavior-y w CSS

Odniesienie:Atrybut scroll-behavior w CSS

Odniesienie:Atrybut scroll-margin w CSS

Odniesienie:Atrybut scroll-padding w CSS

Odniesienie:Atrybut scroll-snap-align w CSS