Przejmij kontrolę nad przewijaniem – dostosuj efekty przeciągnięcia, aby odświeżyć lub przepełnienia

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 łańcuchów w Chrome na Androida

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:

Niestandardowa funkcja „przeciągnij, aby odświeżyć” na Twitterze
podczas odświeżania kanału w swoją progresywną aplikację internetową.
Natywne działanie „przeciągnij, aby odświeżyć” w Chrome na Androida
odświeża całą stronę.

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:

  1. auto – domyślne. Przewinięcia pochodzące z elementu mogą być rozpowszechniane wśród: elementów nadrzędnych.
  2. 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 elemencie html zapobiega nadmiernemu przewijaniu działań nawigacyjnych.
  3. 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

Treść pod oknem czatu również się przewija :(

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:

Przed: zawartość strony przewija się pod nakładką.
Po: zawartość strony nie przewija się pod nakładką.

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:

Przed
Po

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;
}
Przed: po dotknięciu granicy przewijania pojawia się poświata.
Po: poświata wyłączona.

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

Zobacz prezentację | Źródło