Exemples d'utilisation de scrollIntoView

Défilement du DOM

La spécification DOM ne stipule pas quel type de zone de page de défilement chaque navigateur doit implémenter. Chaque navigateur a implémenté des méthodes correspondantes et peut utiliser différentes méthodes pour contrôler le défilement de la zone de page. Ces méthodes existent sous forme d'extensions du type HTMLElement, elles peuvent donc être utilisées sur tous les éléments.

1. scrollIntoView(alignWithTop) Faites défiler la fenêtre du navigateur ou l'élément conteneur afin que l'élément actuel soit visible dans la plage visible de la fenêtre actuelle. Si alignWithTop est vrai, ou s'il est omis, la fenêtre défilera autant que possible jusqu'à ce que le haut d'elle-même soit aussi aligné que le haut de l'élément. ------- Actuellement, tous les navigateurs prennent en charge

2. scrollIntoViewIfNeeded(alignCenter) ne fait défiler la fenêtre du navigateur ou l'élément conteneur que lorsque l'élément actuel n'est pas visible dans la plage visible de la fenêtre. élément actuel visible. Si l'élément actuel est visible dans la fenêtre, cette méthode ne fait rien. Si le paramètre facultatif alignCenter est défini sur true, cela signifie essayer d'afficher l'élément au milieu de la fenêtre (direction verticale) ------Safari et Chrome implémentent cette méthode

3. lineCount) Le contenu défile du nombre de lignes spécifié. La valeur de lineCount peut être positive ou négative. ---Safari et Chrome implémentent cette méthode

4. scrollByPages(pageCount) fait défiler le contenu de l'élément jusqu'à la hauteur de page spécifiée. La hauteur spécifique est déterminée par la hauteur de l'élément. ---Safari et Chrome implémentent cette méthode

scrollIntoView() et scrollIntoVIewIfNeeded() affectent la fenêtre de l'élément, tandis que scrollByLines() et scrollByPages() affectent l'élément lui-même. quelques exemples :

//将页面主体滚动5行
document.body.scrollByLines(5);

/确保当前元素可见
document.getElementById(“test”).scrollIntoView();   //
//true:对象的顶端与当前窗口的顶部对齐
//false:对象的底端与当前窗口的顶部对齐

//确保只在当前元素不可见的情况下才使其可见
document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页
doument.body.scrollByPages(-1);
由于只有scrollIntoView被各浏览器均支持，所以这个方法最为常用

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!