JavaScript: przewijanie do elementu, opcje scrollIntoView na żywo | We.Inc
Przetestuj każdą opcję scrollIntoView w działającym polu, napraw nagłówki ukryte pod przyklejonym headerem za pomocą scroll-margin-top i skopiuj kod płynnego przewijania w JavaScript i czystym CSS.
Przewijanie do elementu w JavaScript
Wywołaj element.scrollIntoView({ behavior: 'smooth', block: 'start' }), aby pokazać element w widoku. block decyduje, gdzie element znajdzie się w pionie: start, center, end lub nearest. Jeśli przyklejony header zasłania cel, nadaj celowi w CSS scroll-margin-top równe wysokości headera, zamiast wyliczać przesunięcia w JavaScript.
Opcje scrollIntoView
Opcja
Wartości
Domyślnie
"smooth", "instant", "auto" (zgodnie z CSS scroll-behavior)
"auto"
block (w pionie)
"start", "center", "end", "nearest"
"start"
inline (w poziomie)
"start", "center", "end", "nearest"
"nearest"
true / false zamiast opcji
true = block start, false = block end (inline nearest)
Są trzy sposoby przeniesienia strony do elementu: scrollIntoView na elemencie, scrollTo z pozycją w pikselach i zwykły link do id. Plac zabaw pokazuje, co robi każda wartość block i jak scroll-margin-top chroni nagłówek przed przyklejonym paskiem, a przykłady obejmują kod potrzebny do menu, błędów formularzy i list w stylu czatu.
Wybierz wiersz docelowy i wartość block, a potem naciśnij Przewiń. Przesuwa się tylko pole demo, więc ta strona zostaje na miejscu.
Zwiększ margines przewijania do wysokości szarego przyklejonego paska i zobacz, jak cel zatrzymuje się tuż pod nim.
Przełącz behavior między smooth i instant, aby porównać oba tryby.
Skopiuj wygenerowane wywołanie scrollIntoView i regułę CSS na swoją stronę.
scroll-margin-top działa też, gdy ktoś otwiera link do #section, więc jedna reguła CSS naprawia zarówno kliknięcia, jak i udostępnione adresy URL.
Używaj block: 'nearest' do nawigacji klawiaturą po liście. Przewija tylko tyle, ile trzeba, i nic nie robi, jeśli element jest już widoczny.
Płynne przewijanie długiej strony może wydawać się wolne. Owiń html { scroll-behavior: smooth } w media query prefers-reduced-motion: no-preference, aby osoby, które proszą o mniej ruchu, dostawały natychmiastowe skoki.
scrollIntoView przesuwa każdego przewijalnego przodka, łącznie ze stroną. Gdy ma się przesunąć tylko wewnętrzny panel, ustaw jego scrollTop albo wywołaj panel.scrollTo.
Najczęściej zadawane pytania
Jak przewinąć do elementu z offsetem dla stałego headera?
Dodaj do celu scroll-margin-top, na przykład h2 { scroll-margin-top: 80px }. Specyfikacja CSS scroll snap wymaga, by przeglądarki uwzględniały ten margines dla scrollIntoView i linków do #id, nawet gdy przyciąganie nie jest używane.
Jak sprawić, by przewijanie było płynne?
Przekaż behavior: 'smooth' do scrollIntoView lub scrollTo albo ustaw scroll-behavior: smooth na elemencie html, aby animowało się każde przewijanie z kodu i każdy link wewnątrz strony. scroll-behavior nie wpływa na przewijanie wykonywane przez użytkownika kółkiem lub dotykiem.
Czym różni się scrollIntoView od scrollTo?
scrollIntoView działa na elemencie i sam wylicza pozycję. window.scrollTo({ top, behavior }) przenosi do dokładnej pozycji w pikselach, a scrollBy przesuwa o względną wartość. Używaj scrollTo, gdy masz już liczbę, na przykład przy powrocie do zapisanej pozycji.
Jak przewinąć na górę strony?
window.scrollTo({ top: 0, behavior: 'smooth' }). Dla przewijalnego panelu wywołaj tę samą metodę na elemencie panelu zamiast na window.
Dlaczego scrollIntoView nic nie robi?
Częste przyczyny to wywołanie przed powstaniem elementu (uruchom je po renderze, na przykład w efekcie React), element z display: none albo opcja nearest dla elementu, który jest już w pełni widoczny.
Wybór wartości block
start pasuje do skoków do sekcji lub nagłówka, bo czytelnik zaczyna od ich początku. center dobrze sprawdza się przy zwracaniu uwagi na pojedyncze pole, takie jak pierwsze niepoprawne pole formularza. end pasuje do czatu lub logu, gdzie najnowszy element powinien być na dole.
nearest to uprzejma opcja: przesuwa o najmniejszą potrzebną odległość i nie rusza widocznych elementów, czyli dokładnie to, czego chcesz, gdy klawisz strzałki przesuwa podświetlenie po liście.
Bez JavaScript
Zwykły link, taki jak <a href="#pricing">, już przewija do elementu z id pricing, aktualizuje pasek adresu i działa z przyciskiem wstecz. Dodaj scroll-behavior: smooth do elementu html i scroll-margin-top do celów, a wiele menu spisu treści nie będzie potrzebować żadnego skryptu.
Sięgaj po JavaScript, gdy przewijanie następuje po czymś innym niż kliknięcie linku: formularzu, który nie przeszedł walidacji, nowej wiadomości lub wybraniu wyniku wyszukiwania.
Kod przewijania do elementu
Płynne przewinięcie do sekcji
Wyszukuje element po id i przenosi jego górną krawędź na górę widoku.
Offset przyklejonego headera w CSS
Jedna reguła naprawia nachodzenie przy przewijaniu z kodu i przy linkach kończących się na #id. Media query pomija animację dla osób, które wolą ograniczony ruch.
Pokaż pierwsze niepoprawne pole
center trzyma pole i jego etykietę na środku ekranu, a focus przenosi tam też użytkowników klawiatury.
Przewijanie tylko wewnątrz panelu
Używa pozycji elementu wewnątrz panelu, więc strona wokół się nie przesuwa.
React: przewijanie do ref
Ref wskazuje węzeł DOM dopiero po renderze, więc wywołanie odbywa się w handlerze kliknięcia lub w efekcie.
Plac zabaw scrollIntoView
To pole ma własny przyklejony pasek. Wybierz wiersz i opcje, a potem przewiń. Pole stosuje te same obliczenia wyrównania przez scrollTo, więc reszta strony stoi w miejscu.