human
J'ai une page où une barre de défilement contenant des lignes de tableau avec des divs est générée dynamiquement à partir de la base de données. Chaque ligne de tableau agit comme un lien, un peu comme vous le verriez dans une playlist YouTube à côté du lecteur vidéo.
Lorsqu'un utilisateur visite la page, l'option sur laquelle il se trouve doit aller en haut de la div de défilement. Cette fonctionnalité fonctionne. Le problème est qu'elle va juste un peu trop loin. Comme si l'option sur laquelle il se trouve était environ 10px trop haut. Donc, la page est visitée, l'URL est utilisée pour identifier quelle option a été sélectionnée, puis fait défiler cette option en haut de la div de défilement. Note : Il ne s'agit pas de la barre de défilement de la fenêtre, mais d'une div avec une barre de défilement.
J'utilise ce code pour déplacer l'option sélectionnée en haut de la div :
```var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
```
Il la déplace en haut de la div mais environ 10 pixels trop haut.
comment corriger cela
gpt
CSS ```scroll-margin``` et ```scroll-padding```
Vous voudrez peut-être jeter un coup d'œil aux nouvelles propriétés CSS ```scroll-padding``` et ```scroll-margin```. Vous pouvez utiliser ```scroll-padding``` pour le conteneur de défilement (```html``` dans ce cas), et ```scroll-margin``` pour l'élément à l'intérieur du conteneur.
Pour votre exemple, vous voudrez ajouter ```scroll-margin-top``` pour l'élément que vous souhaitez faire défiler dans la vue, comme ceci :
```.example {
  scroll-margin-top: 10px;
}
```
Cela affecte le code ```scrollIntoView```, comme ce code :
```const el = document.querySelector(&quot;.example&quot;);
el.scrollIntoView({block: &quot;start&quot;, behavior: &quot;smooth&quot;});
```
Cela fera défiler le viewport pour aligner la bordure supérieure du viewport avec la bordure supérieure de l'élément, mais avec 10px d'espace supplémentaire. En d'autres termes, ces propriétés de l'élément sont prises en compte :

* ```padding-top```
* ```border-top```
* ```scroll-margin-top```
* (et non ```margin-top```)

De plus, si l'élément ```html``` a ```scroll-padding-top``` défini, cela est également pris en compte.
Si vous utilisez un framework comme Vue, vous voudrez vous assurer que toutes les modifications du DOM sont terminées avant d'exécuter `scrollIntoView` en utilisant quelque chose comme `Vue.nextTick(() => el.scrollIntoView())`