TL;DR
Właściwość CSS overscroll-behavior
pozwala programistom zastępować
domyślne zachowanie związane z przewijaniem w górę i w dół strony.
treści. Przypadki użycia obejmują wyłączanie odświeżania przez przeciąganie
w wersji na komórki, usuwając efekty poświaty przewijania
i gumowania pasków,
i zapobiega przewijaniu zawartości strony, gdy jest ona pod modą lub nakładką.
Tło
Przewijanie granic i łańcuch przewijania
Przewijanie to jeden z podstawowych sposobów interakcji ze stroną, ale obsługa pewnych wzorców UX może sprawiać problemy ze względu na dziwaczne cechy przeglądarki. zachowanie domyślne. Weźmy na przykład panel aplikacji z dużą liczbą elementy, które użytkownik będzie musiał przewinąć. Po dotarciu do dołu dodatkowy kontener przestaje przewijać, bo nie ma więcej treści do przejrzenia. Innymi słowy, użytkownik osiągnie „granicę przewijania”. Warto jednak zwrócić uwagę, co się stanie, jeśli użytkownik będzie nadal przewijanie. Treść za panelem zaczyna się przewijać. Przewijanie jest przejęte przez kontener nadrzędny; samej strony głównej z przykładu.
Okazuje się, że to właśnie tzw. łańcuch przewijania. Domyślne ustawienia przeglądarki podczas przewijania. Domyślnie ustawienia domyślne są całkiem dobre, czasami jest to niepożądane lub nawet nieoczekiwane. Niektóre aplikacje mogą chcieć zapewniają inne wrażenia użytkownikom, którzy przekraczają granicę przewijania.
Efekt „przeciągnij, by odświeżyć”
Odświeżanie przez wyciąganie to intuicyjny gest, który jest popularny wśród aplikacji mobilnych, takich jak Facebooka i Twittera. Wykorzystanie kanału społecznościowego i opublikowanie treści miejsca na najnowsze posty. Ten konkretny UX stały się tak popularne, że przeglądarki mobilne, takie jak Chrome na urządzeniach z Androidem, taki sam efekt. Przesunięcie palcem w dół u góry strony powoduje odświeżenie całej strony:
W sytuacjach takich jak PWA na Twitterze:
warto wyłączyć natywne działanie „przeciągnij, by odświeżyć”. Dlaczego? W tym
aplikacji, prawdopodobnie nie chcesz, aby użytkownik przypadkowo odświeżał stronę. Jest
również podwójne odświeżanie. Być może
lepiej dostosować działanie przeglądarki, ściślej dostosowując ją
marki. Niestety tego rodzaju dostosowania
Ciężko było się na nie oderwać. W końcu programiści piszą zbędny kod JavaScript,
niepasywny
detektor dotyku (blokujący przewijanie) lub całą stronę
<div>
(aby zapobiec przepełnieniu strony). Te sposoby obejścia tego problemu
dobrze udokumentowane negatywne
na wydajność przewijania.
Stać nas na więcej!
Przedstawiamy overscroll-behavior
Właściwość overscroll-behavior
to nowa funkcja CSS, która kontroluje
zachowanie tego, co się dzieje, gdy nadmiernie przewiniesz kontener (łącznie
stronie). Za jego pomocą możesz anulować łańcuch przewijania, wyłączyć/dostosować
„przeciągnij, by odświeżyć”, wyłącz efekty gumki (gumboxing) w iOS (gdy Safari
implementuje overscroll-behavior
) i inne.
Co najlepsze, korzystanie z overscroll-behavior
nie wpływa negatywnie na
wydajność strony, takie jak ataki opisane we wprowadzeniu.
Właściwość może przyjmować 3 wartości:
- auto – domyślne. Przewinięcia pochodzące z elementu mogą być rozpowszechniane wśród: elementów nadrzędnych.
- contain – zapobiega tworzeniu łańcuchów przewijania. Przewinięcia nie są rozpowszechniane do elementów nadrzędnych
ale efekty lokalne są widoczne w węźle. Na przykład poświata dalekim przewinięciem
efekt gumki na Androidzie oraz efekt gumki w przypadku iOS, który powiadamia użytkownika
gdy przekraczają granicę przewijania. Uwaga: użycie
overscroll-behavior: contain
w elemenciehtml
zapobiega nadmiernemu przewijaniu działań nawigacyjnych. - none – działa tak samo jak
contain
, ale zapobiega efektom przewinięcia w ciągu sam węzeł (np. efekt sygnalizowania końca przewijania w Androidzie lub gumka typu gumka w iOS).
Przyjrzyjmy się kilku przykładom, aby dowiedzieć się, jak używać atrybutu overscroll-behavior
.
Zapobiegaj pomijaniu przewijania w obrębie elementu o stałej pozycji
Scenariusz rozmowy
Weźmy pod uwagę stałe okno czatu u dołu strony. aby okno czatu było autonomicznym elementem i można je było przewijać niezależnie od materiałów, które się za nimi znajdują. Jednak ze względu na łańcuch przewijania dokument rozpoczyna przewijanie, gdy użytkownik kliknie ostatnią wiadomość na czacie historię.
W przypadku tej aplikacji bardziej odpowiednie są przewijanie, które pochodzą z
pozostają na czacie. Możemy to osiągnąć, dodając
overscroll-behavior: contain
do elementu, który zawiera wiadomości czatu:
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
Zasadniczo tworzymy logiczny rozdzielenie między przewijaniem w polu czatu kontekstu i strony głównej. Efektem jest to, że strona główna pozostaje użytkownik przechodzi do górnej lub dolnej części historii czatu. Przewinięcia rozpoczynające się od okno czatu nie jest rozpowszechniane.
Scenariusz rozmowy z informacjami o nakładce na stronie
Kolejna odmiana funkcji „underscroll” gdy widzisz treści,
przewijanie za nakładką o stałej pozycji. Nieumarły prezent
overscroll-behavior
– wszystko w porządku. Przeglądarka próbuje być pomocna, ale
w efekcie witryna sprawia wrażenie,
że jest błędna.
Przykład – modalny z parametrem overscroll-behavior: contain
i bez niego:
Wyłączam odświeżanie metodą „przeciągnij, aby”
Wyłączenie działania „przeciągnij, aby odświeżyć” to jeden wiersz kodu CSS. Tylko zapobiegaj
łańcuch przewijania na całym elemencie definiującym widoczny obszar. W większości przypadków jest to
<html>
lub <body>
:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
Ten prosty dodatek poprawiamy podwójne animacje „przeciągnij, aby odświeżyć” w prezentacji skrzynki czatu zaimplementuj efekt niestandardowy, który pozwoli uzyskać płynniejszą animację wczytywania. cała skrzynka odbiorcza jest również rozmyta podczas odświeżania skrzynki odbiorczej:
Oto fragment pełny kod:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Wyłączanie poświaty i efektu gumki
Aby wyłączyć efekt odbicia po dotarciu do granicy przewijania, użyj funkcji
overscroll-behavior-y: none
:
body {
/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
overscroll-behavior-y: none;
}
Pełna wersja demonstracyjna
Łącząc wszystko w całość,
czat demo używa:
overscroll-behavior
, aby utworzyć niestandardową animację „przeciągnij, aby odświeżyć”.
i wyłączyć możliwość przewijania okna czatu. Zapewnia to optymalną
użytkowników, co byłoby trudno osiągnąć bez CSS
overscroll-behavior