Comment faire défiler jusqu'à un élément à l'aide de JavaScript ?

Comment faire défiler jusqu'à un élément à l'aide de JavaScript ?

Vous pouvez utiliser la méthode scrollIntoView() pour faire défiler jusqu'à un élément spécifique sur une page Web. Cette méthode est prise en charge par tous les principaux navigateurs.

Pour utiliser la méthode scrollIntoView(), transmettez simplement l'élément vers lequel vous souhaitez faire défiler comme argument à la méthode. Par exemple, le code suivant fait défiler jusqu'à l'élément avec l'ID « divFirst » :

document.getElementById("divFirst").scrollIntoView();

La méthode scrollIntoView() peut prendre un deuxième argument facultatif qui spécifie comment l'élément doit défiler pour apparaître. Les valeurs suivantes sont acceptées :

• "auto": L'élément défilera autant que possible sans faire défiler la page loin de sa position actuelle.
• "smooth": L'élément défilera dans la vue en douceur, avec un effet d'animation.
• "si nécessaire" : L'élément ne défilera dans la vue que s'il n'est pas déjà visible.

Par exemple, le code suivant fait défiler en douceur jusqu'à l'élément portant l'ID « divFirst » :

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

Vous pouvez également utiliser la méthode scrollIntoView() pour faire défiler jusqu'à un décalage spécifique dans un élément. Pour cela, transmettez un objet avec les propriétés suivantes comme deuxième argument à la méthode :

• "block" : Le décalage par rapport au haut de l'élément, en pixels.
• "inline" : Le décalage par rapport à la gauche de l'élément, en pixels.

Par exemple, le code suivant fait défiler jusqu'à l'élément avec l'ID "divFirst" et le décale de 100 pixels à partir du haut et 50 pixels en partant de la gauche :

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

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!