J'ai une page Web sur laquelle je voudrais faire défiler jusqu'à un certain élément.

Cette partie fonctionne bien en utilisant scrollIntoView; mais je voudrais ajouter un peu d'espace au-dessus de l'élément (20px ou quelque chose)

Je fais actuellement quelque chose comme ça:

const moveToBlue = () => {
  const blue = document.getElementById('blue')
  blue.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start'});
};

Je voudrais cependant faire défiler plus de 20 pixels (voir ma démo ici)

Est-ce possible?

7
methgaard 16 avril 2018 à 16:54

3 réponses

Meilleure réponse

En général, ce n'est pas très simple (si nous voulons behavior: smooth), et il faudra jouer avec javascript d'une manière ou d'une autre. Par exemple, vous pouvez utiliser window.scrollTo et calculer position supérieure nécessaire manuellement.

Dans certains cas, cependant, vous pouvez obtenir visuellement l'effet nécessaire en utilisant CSS intelligemment. Dans votre démo, vous pouvez utiliser padding-top au lieu de la marge et envelopper le contenu du bloc dans un conteneur d'assistance supplémentaire.

Démo: https://codepen.io/anon/pen/OvKQLV

2
dfsq 16 avril 2018 à 14:36

Une autre solution potentielle consiste à faire défiler non pas l'élément lui-même, mais vers l'un de ses frères et sœurs précédents. Exemple:

let elementToScrollTo = <yourTargetElement>;
const childOffset = 3;
for (let i = 0; i < childOffset; i++) {
    if (!elementToScrollTo.previousElementSibling) {
       break;
    }
    elementToScrollTo = elementToScrollTo.previousElementSibling;
}
elementToScrollTo.scrollIntoView();
0
Daniel Veihelmann 5 févr. 2020 à 12:34

Vous pouvez définir l'attribut CSS scroll-margin sur l'élément cible de défilement. Par exemple

.blue {
  scroll-margin: 20px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

8
colinux 6 janv. 2020 à 11:23