Czy scrollIntoView działa we wszystkich przeglądarkach?

Odpowiedzi:

82

Jest obsługiwany tak, ale wrażenia użytkownika są ... złe.

Jak zauważył @ 9bits, od dawna jest to obsługiwane przez wszystkie główne przeglądarki . Nie martw się o to. Głównym problemem jest sposób, w jaki to działa. Po prostu przeskakuje do konkretnego elementu, który równie dobrze może znajdować się na końcu strony. Skacząc do niego, użytkownicy nie mają pojęcia, czy:

  • strona została przewinięta w górę
  • strona została przewinięta w dół
  • zostali przekierowani gdzie indziej

Pierwsze dwa można określić na podstawie pozycji przewijania, ale kto powiedział, że użytkownicy śledzili pozycję przewijania przed wykonaniem skoku? Jest to więc działanie niedeterministyczne.

To ostatnie może być prawdziwe zwłaszcza jeśli strona ma ruchomy nagłówek, który jest przewijany z widoku, a pozostały projekt strony nie oznacza niczego na tej samej stronie (jeśli również nie ma elementu pionowego o całkowitej wysokości, takiego jak lewe menu bar). Zdziwiłbyś się, ile stron ma ten problem. po prostu sprawdź je sam. Wejdź na jakąś stronę, spójrz na nią u góry, a następnie naciśnij Endklawisz i spójrz na nią ponownie. Prawdopodobnie pomyślisz, że to inna strona.

Animowana scrollintoviewwtyczka jQuery na ratunek

Dlatego nadal istnieją wtyczki, które wykonują przewijanie do widoku zamiast używania natywnej funkcji DOM. Zwykle animują przewijanie, co eliminuje wszystkie 3 problemy opisane powyżej. Użytkownicy mogą łatwo śledzić ruch.

Robert Koritnik
źródło
1
Uwaga: wtyczka jQuery nie działa (po prawej), jeśli przewijany element znajduje się w ramce iframe (z oczywistych powodów). Element.scrollIntoView działa nawet wtedy.
panzi
7
nowa specyfikacja ScrollIntoViewOptionspozwala określić behavior: 'smooth'. niestety nie ma sposobu, aby łatwo sprawdzić, czy ta opcja jest obsługiwana w przeglądarce…
latające owce
6
Wydaje się, że Firefox obsługuje behavior: "smooth", ale nie Chrome lub Safari.
Flimm
1
Jest to przydatne do takich rzeczy, jak tworzenie niestandardowego menu rozwijanego, w którym klawisze strzałek sterują w górę / w dół iw zależności od wybranej pozycji przewijają się menu. W takim przypadku byłoby złym doświadczeniem użytkownika, gdyby nie przeskakiwał natychmiast między elementami.
user2867288
1
@Flimm ani w IE / Edge. Zobacz odniesienie , tylko FF36 + ma tę funkcję. Dlatego jest to niestety bezużyteczne.
Alex Zhukovskiy,
3

Używam iScroll-4 Matteo Spinnelli i działa również w iOS Safari. Ma trzy metody scrollTo, scrollToElement i scrollToPage. Załóżmy, że masz nieuporządkowaną listę elementów umieszczonych wewnątrz elementu div. Jak napisał Robert Koritnik powyżej, musisz mieć tę niewielką animację, aby pokazać, że przewinąłeś. Ten efekt osiąga poniższa metoda.

scrollToElement(element, time);
thandasoru
źródło
2
twój link do iScroll-4 jest martwy
Romain Vincent
2

Możesz użyć alternatywy i animacji jQuery <html>i <body>elementów:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
S1awek
źródło
1

Nie próbowałem tego, ale wydaje się, że piggybacking na wbudowanej funkcji scrollIntoView pozwoliłoby zaoszczędzić dużo kodu. Oto, co zrobiłbym, gdybyś chciał animowaną akcję:

  1. Buforuj bieżącą pozycję przewijania kontenera jako POZYCJĘ POCZĄTKOWĄ
  2. uruchom wbudowany scrollIntoView
  3. Buforuj ponownie pozycję przewijania jako POZYCJA KOŃCOWA
  4. Umieść pojemnik z powrotem w POZYCJI STARTOWEJ
  5. Animuj przewijanie do POZYCJI KOŃCOWEJ
Lex
źródło
1

przeczytaj proszę o scrollIntoViewIfNeeded 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
zloctb
źródło