Element.
Przewija stronę i przewijane kontenery tak, żeby element pojawił się na ekranie, skokiem albo płynnie.
- Zwraca
undefined
Przykład
#const messages = document.querySelector('#messages')
function addMessage(text) {
const item = document.createElement('li')
item.textContent = text
messages.append(item)
item.scrollIntoView({ behavior: 'smooth', block: 'end' })
console.log('Nowa wiadomość:', text)
}
addMessage('Kuba: Skończyłem moduł 3!')Nowa wiadomość: Kuba: Skończyłem moduł 3!
Lista wiadomości przewija się płynnie, a nowy wpis pojawia się przy dolnej krawędzi. Ten przykład nie uruchamia się w podglądzie, bo scrollIntoView() przewinęłoby nie tylko ramkę z przykładem, ale też całą stronę dokumentacji.
Definicja i zastosowanie
#Metoda scrollIntoView() przewija wszystkie przewijane obszary, w których leży element, tak żeby stał się widoczny. Przydaje się przy spisie treści, przejściu do pierwszego błędu w formularzu, pokazaniu nowej wiadomości w czacie albo zaznaczonej pozycji na długiej liście.
Bez argumentów element trafia do górnej krawędzi widocznego obszaru. Obiekt opcji pozwala to zmienić: block ustala położenie w pionie ("start", "center", "end" albo "nearest"), inline w poziomie, a behavior: "smooth" włącza płynne przewijanie zamiast skoku. Wartość "nearest" przewija tylko wtedy, gdy element jest poza ekranem, i tylko o tyle, ile trzeba.
Przewijane są wszystkie kontenery po drodze, łącznie z całym oknem, a w niektórych przeglądarkach nawet strona, która osadza dokument w ramce iframe. Jeśli element leży w liście z overflow: auto, przesunie się najpierw lista, a potem strona. Stały nagłówek (position: fixed lub sticky) może po przewinięciu zasłonić element. Rozwiązaniem jest właściwość CSS scroll-margin-top ustawiona na elemencie docelowym.
Składnia
#element.scrollIntoView()
element.scrollIntoView(alignToTop)
element.scrollIntoView(options)Parametry
#alignToTop
opcjonalny, boolean
true(domyślnie) wyrównuje element do górnej krawędzi, afalsedo dolnej. To starszy zapis, dziś częściej używa się obiektu opcji.options
opcjonalny obiekt
behavior("auto"lub"smooth") orazblockiinline("start","center","end","nearest"). Domyślnieblock: "start"iinline: "nearest".
Więcej przykładów
#const lessons = document.querySelector('#lessons')
for (let i = 1; i <= 12; i++) {
const item = document.createElement('li')
item.textContent = `Lekcja ${i}`
if (i === 8) item.classList.add('current')
lessons.append(item)
}
function show(item) {
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
console.log('Przewinięto do:', item.textContent)
}
document.querySelector('#go-current').addEventListener('click', () => show(lessons.querySelector('.current')))
document.querySelector('#go-last').addEventListener('click', () => show(lessons.lastElementChild))
console.log('Lekcji na liście:', lessons.children.length)Kliknij przyciski w podglądzie. Lista przewinie się płynnie do wybranej lekcji, a w konsoli pojawi się jej nazwa. Dzięki block: "nearest" przesuwa się tylko lista, o tyle, ile trzeba, żeby lekcja była widoczna.
document.querySelector('#toc').addEventListener('click', (event) => {
const link = event.target.closest('a[href^="#"]')
if (!link) return
event.preventDefault()
document.querySelector(link.hash).scrollIntoView({ behavior: 'smooth' })
history.replaceState(null, '', link.hash)
})Jeśli strona ma stały nagłówek o wysokości 64 px, dodaj w CSS regułę h2 { scroll-margin-top: 80px }. Przewinięta sekcja zatrzyma się wtedy pod nagłówkiem, zamiast chować się za nim.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy przewijaniu list wybieraj
block: "nearest". Element, który już jest widoczny, zostanie na miejscu, a strona nie będzie skakać bez potrzeby. - Jeśli stały nagłówek zasłania element po przewinięciu, ustaw na elemencie docelowym
scroll-margin-topo wysokości nagłówka. - Szanuj ustawienia dostępności: gdy użytkownik włączył ograniczenie animacji (
prefers-reduced-motion), używajbehavior: "auto"zamiast"smooth".
Powiązane hasła
#- Element.getBoundingClientRect()Zwraca rozmiar elementu i jego położenie względem widocznego obszaru okna w postaci obiektu DOMRect.
- HTMLElement.focus()Ustawia fokus na elemencie, np. polu formularza, żeby od razu odbierał klawiaturę. Metoda blur() zdejmuje fokus.
- IntersectionObserverObserwuje, czy element jest widoczny w oknie albo w przewijanym kontenerze, i wywołuje funkcję, gdy to się zmienia.
- matchMedia()Sprawdza w JavaScripcie, czy strona spełnia zapytanie medialne CSS, np. (max-width: 600px), i pozwala reagować na jego zmiany.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
Widzisz błąd albo brakuje przykładu? Napisz do nas.