Maison >interface Web >tutoriel CSS >Comment obtenir un défilement fluide sans mouvement de page dans des conteneurs à position fixe ?

Comment obtenir un défilement fluide sans mouvement de page dans des conteneurs à position fixe ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-10 14:35:03615parcourir

How to Achieve Smooth Scrolling Without Page Movement in Fixed-Position Containers?

ScrollIntoView() Défilement fluide sans mouvement de page

Lors de l'utilisation de ScrollIntoView(true) pour faire défiler des éléments dans un conteneur à position fixe, il a On a observé que la page entière bouge légèrement. Il s'agit d'un comportement prévu, mais dans certains cas, il peut être indésirable.

Pour les conteneurs à position fixe, la solution suivante peut empêcher le déplacement de la page :

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Cette syntaxe modifiée spécifie :

  • comportement : 'smooth' : défile en douceur
  • bloc : 'le plus proche' : fait défiler le bord le plus proche de l'élément dans la vue
  • en ligne : 'start' : Fait défiler le bord de départ de l'élément dans l'élément parent

En spécifiant ces paramètres, l'élément conteneur défilera en douceur, faisant apparaître l'élément cible sans affecter la position de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn