Zachowanie nadmiernego przewijania - CSS-Tricks

overscroll-behaviorNieruchomość w kontroli CSS czy element użyje „przewijania łańcuchowym”, czy nie. Prawdopodobnie doświadczyłeś tego zachowania już wcześniej i być może przyjmowałeś za pewnik, że przewijanie działa w ten sposób w Internecie! Jeśli jesteś wewnątrz elementu, który ma własne przewijanie (powiedzmy, że jest pionowy) i przewinąłeś go do samego dołu, domyślnie następny element nadrzędny w górę (może sama strona) zaczyna się przewijać w tym kierunku. Jeśli nie chcesz tego ustawienia domyślnego, overscroll-behaviorkontroluje go.

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )

Zobacz
zachowanie związane z nadmiernym przewijaniem pióra autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Kaskady właściwości (tj. Są dziedziczone), więc jeśli nie podoba ci się żaden element, który to robi, możesz zastosować go do ciała, aby zapobiec wystąpieniu tego w dowolnym miejscu:

body ( overscroll-behavior: contain; /* or "none" */ )

noneWartość ma zatrzymać dalekie przewinięcie affordance , co moje najlepsze środki domyślać, że takie rzeczy gumy banding rzeczy, że niektóre przeglądarki zrobienia, zwłaszcza urządzeń z touchpadem przewijania.

Wartość domyślna to auto.

Zasoby

Moduł zachowania CSS Overscroll, poziom 1
Wiadomości platformy internetowej

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom	Firefox	TO ZNACZY	Brzeg	Safari
65	59	11	79	Nie

Telefon komórkowy / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nie

filtr tła
widoczność z tyłu
tło
załącznik w tle
tryb mieszania tła
background-clip
kolor tła
zdjęcie w tle
pochodzenie tła
pozycja tła
powtarzanie tła
background-size
krwawić
przepełnienie bloku
granica
granica-granica
border-collapse
border-image
border-radius
border-spacing
Dolny
box-decoration-break
box-shadow
rozmiar pudełka
włamanie do środka

strona podpisu
wstawka korektorska
kolor daszka
kształt daszka
jasny
clip-path
kolor
dopasuj kolor
liczba kolumn
wypełnienie kolumny
odstęp między kolumnami
reguła kolumny
kolumna reguły kolor
styl reguły kolumny
kolumna-reguła-szerokość
rozpiętość kolumn
szerokość kolumny
kolumny
zawierać
zawartość
przyrost licznika
reset licznika
zestaw przeciwstawny
kursor

kierunek
pokaz

puste komórki

napełnić
filtr
zgiąć
flex-base
flex-direction
elastyczny przepływ
flex-grow
flex-shrink
flex-wrap
pływak
czcionka
wyświetlanie czcionek
rodzina czcionek
font-feature-settings
font-kerning
rozmiar czcionki optycznej
rozmiar czcionki
dostosowywanie rozmiaru czcionki
font-stretch
styl czcionki
synteza czcionek
wariant czcionki
font-variant-numeric
grubość czcionki

sol

luka
grid-row / grid-column
grid-template-columns / grid-template-rows

wiszące znaki interpunkcyjne
wysokość
Myślniki

renderowanie obrazu
pierwsza litera
rozmiar inline
wstawka
wstawka-blok
inset-block-end
inset-block-start
wstawka w linii
inset-inline-end
inset-inline-start
izolacja

jot

justify-content
justify-items

lewo
odstępy między literami
przerwanie linii
zacisk linii
Wysokość linii
styl listy

margines
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
klips do maski
obraz-maski
tryb maski
początek maski
pozycja maski
powtórzenie maski
rozmiar maski
maksymalna wysokość
max-inline-size
max-width
min-wysokość
min-width
tryb mieszania-mieszania

dopasowanie do obiektu
pozycja-obiektu
odsunięcie kotwicy
odległość przesunięcia
offset-path
offset-rotate
nieprzezroczystość
zamówienie
sieroty
zarys
przesunięcie konturu
przelewowy
kotwica przelewowa
overflow-wrap
zachowanie nadmiernego przewijania

wyściółka
podział strony
zamówienie farby
perspektywiczny
perspektywiczne pochodzenie
elementy miejsca
zdarzenia wskaźnikowe
pozycja

cytaty

Zmień rozmiar
dobrze
odstęp między wierszami

zachowanie przewijania
margines przewijania
scroll-padding
scroll-snap-align
scroll-snap-stop
scroll-snap-type
pasek przewijania
scrollbar-color
scrollbar-gutter
scrollbar-width
próg kształtu obrazu
margines kształtu
kształt na zewnątrz
mówić
uderzenie
kreska-kreska
przesunięcie kreski kreski
obrys-linecap
stroke-linejoin
szerokość obrysu

rozmiar zakładki
układ tabeli
wyrównywanie tekstu
text-align-last
tekst-kombinacja-pionowo
dekoracja tekstu
kolor dekoracji tekstu
text-decoration-line
text-decoration-skip
tekst dekoracji pomiń atrament
styl dekoracji tekstu
grubość-dekoracji-tekstu
wcięcie tekstu
justowanie tekstu
orientacja tekstu
przepełnienie tekstu
renderowanie tekstu
cień tekstu
obrys tekstu
transformacja tekstu
tekst-podkreślenie-przesunięcie
pozycja-podkreślenia-tekstu
góra / dół / lewo / prawo
akcja dotykowa
przekształcać
pochodzenie transformacji
styl transformacji
przejście
opóźnienie przejścia
czas trwania przejścia
właściwość przejścia
funkcja czasu przejścia

unicode-bidi
zakres unicode
wybór użytkownika

wyrównać w pionie
widoczność

Biała przestrzeń
wdowy
szerokość
ulegnie zmianie
podział słów
odstępy między wyrazami
tryb pisania

Z-index
Powiększenie

Selektory

ZA
- ::przed po
- :aktywny
- : dowolny link
- Sąsiadujące rodzeństwo
- (atrybut)
b
- :pusty
do
- :sprawdzone
- :obecny
- Dziecko
- Klasa
re
- :domyślna
- : dir ()
- :niepełnosprawny
- Potomek
mi
- :pusty
- : włączone
fa
- :: pierwsza litera
- ::Pierwsza linia
- :pierworodny
- : pierwszy typ
- :skupiać
- : ostrość widoczna
- : skupienie wewnątrz
- :przyszłość
sol
- Ogólne rodzeństwo
H.
- :unosić się
ja
- :w zakresie
- :nieokreślony
- :nieważny
- :jest()
- ID
jot
K.
L
- : lang ()
- :ostatnie dziecko
- : ostatni z typów
- :połączyć
M
- ::znacznik
- :mecze()
N
- :nie()
- : nth-child
- : nth-last-child
- : nth-last-of-type
- : nth-of-type
O
- :Jedynak
- : tylko typu
- :opcjonalny
- :poza zakresem
P.
- :: placeholder
- :przeszłość
- : pokazano symbol zastępczy
Q
R
- : do odczytu i zapisu /: tylko do odczytu
- :wymagany
- :korzeń
S
- ::wybór
T
- :cel
- Rodzaj
U
- : nieprawidłowy użytkownik
- uniwersalny
V
- :ważny
- : odwiedzone
W.
X
Y
Z

Nasi partnerzy ds. Uczenia się

Frontend Masters

Potrzebujesz szkolenia z zakresu programowania front-end?

Frontend Masters to najlepsze miejsce, aby to zdobyć. Prowadzą kursy na temat wszystkich najważniejszych technologii front-end, od Reacta po CSS, od Vue do D3 i nie tylko z Node.js i Full Stack.