Element.
Fait défiler la page et les conteneurs défilants pour que l’élément apparaisse à l’écran, par un saut ou en douceur.
- Renvoie
undefined
Exemple
#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('Nouveau message :', text)
}
addMessage('Lucas : J’ai terminé le module 3 !')Nouveau message : Lucas : J’ai terminé le module 3 !
La liste de messages défile en douceur, et la nouvelle entrée apparaît près du bord inférieur. Cet exemple ne s’exécute pas dans l’aperçu, car scrollIntoView() ferait défiler non seulement le cadre de l’exemple, mais aussi toute la page de documentation.
Définition et utilisation
#La méthode scrollIntoView() fait défiler toutes les zones défilantes dans lesquelles se trouve l’élément, pour qu’il devienne visible. Elle est utile pour une table des matières, pour aller au premier champ en erreur d’un formulaire, pour afficher un nouveau message dans un chat, ou pour une position sélectionnée dans une longue liste.
Sans argument, l’élément atterrit au bord supérieur de la zone visible. Un objet d’options permet de changer cela : block fixe la position verticale ("start", "center", "end" ou "nearest"), inline la position horizontale, et behavior: "smooth" active un défilement en douceur au lieu d’un saut. La valeur "nearest" ne fait défiler que si l’élément est hors écran, et seulement de ce qu’il faut.
Tous les conteneurs sur le chemin défilent, y compris toute la fenêtre, et dans certains navigateurs même la page qui intègre le document dans un iframe. Si l’élément se trouve dans une liste avec overflow: auto, c’est d’abord la liste qui se déplace, puis la page. Un en-tête fixe (position: fixed ou sticky) peut, après le défilement, recouvrir l’élément. La solution est la propriété CSS scroll-margin-top définie sur l’élément cible.
Syntaxe
#element.scrollIntoView()
element.scrollIntoView(alignToTop)
element.scrollIntoView(options)Paramètres
#alignToTop
booléen, optionnel
true(par défaut) aligne l’élément sur le bord supérieur, etfalsesur le bord inférieur. C’est l’ancienne écriture ; aujourd’hui, on utilise plus souvent l’objet d’options.options
objet, optionnel
behavior("auto"ou"smooth") ainsi queblocketinline("start","center","end","nearest"). Par défaut,block: "start"etinline: "nearest".
Plus d’exemples
#const lessons = document.querySelector('#lessons')
for (let i = 1; i <= 12; i++) {
const item = document.createElement('li')
item.textContent = `Leçon ${i}`
if (i === 8) item.classList.add('current')
lessons.append(item)
}
function show(item) {
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
console.log('Défilement jusqu’à :', item.textContent)
}
document.querySelector('#go-current').addEventListener('click', () => show(lessons.querySelector('.current')))
document.querySelector('#go-last').addEventListener('click', () => show(lessons.lastElementChild))
console.log('Leçons dans la liste :', lessons.children.length)Cliquez sur les boutons dans l’aperçu. La liste défilera en douceur jusqu’à la leçon choisie, et son nom apparaîtra dans la console. Grâce à block: "nearest", seule la liste se déplace, et seulement de ce qu’il faut pour que la leçon soit visible.
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)
})Si la page a un en-tête fixe de 64 px de hauteur, ajoutez en CSS la règle h2 { scroll-margin-top: 80px }. La section ciblée s’arrêtera alors sous l’en-tête, au lieu de se cacher derrière.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour faire défiler des listes, choisissez
block: "nearest". Un élément déjà visible restera en place, et la page ne sautera pas inutilement. - Si un en-tête fixe recouvre l’élément après le défilement, définissez sur l’élément cible un
scroll-margin-topde la hauteur de l’en-tête. - Respectez les réglages d’accessibilité : quand l’utilisateur a activé la réduction des animations (
prefers-reduced-motion), utilisezbehavior: "auto"plutôt que"smooth".
Entrées associées
#- Element.getBoundingClientRect()Renvoie la taille d’un élément et sa position par rapport à la zone visible de la fenêtre, sous la forme d’un objet DOMRect.
- HTMLElement.focus()Donne le focus à un élément, par ex. un champ de formulaire, pour qu’il reçoive immédiatement le clavier. La méthode blur() retire le focus.
- IntersectionObserverObserve si un élément est visible dans la fenêtre ou dans un conteneur défilant, et appelle une fonction quand cela change.
- matchMedia()Vérifie en JavaScript si la page satisfait une media query CSS, par exemple (max-width: 600px), et permet de réagir à ses changements.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.