ScrollIntoView

Une petite technique simple pour assurer la visibilité d'un élément lorsque celui-ci est descendant d'un élément qui peut defiler.

/**
 *  Placer un élément dont un ascendant peut défiler (scroll) dans
 *  la zone de visiblité.
 *
 *  Pour que la méthode fonctionne, l'ascendant qui peut défiler doit
 *  être positionné.
 *
 *  @param {HTMLElement} scrolled Ascendant de l'élément qui peut défiler.
 *  @param {HTMLElement} target Elément qui doit être placé dans la zone
 *  de visibilité.
 *  @param {int} align Le type d'alignement dans la zone de visibilité :
 *  - 0 : alignement au sommet de la zone.
 *  - 1 : alignement au milieu de la zone.
 *  - 2 : alignement au bas de la zone.
 *  @param {Boolean} [force = false] Si l'alignement doit être forcé, 
 *  c'est-à-dire appliqué même si la cible se trouve déjà dans la zone
 *  de visibilité.
 */
var scrollIntoView = function (scrolled, target, align, force)
{
    if (!force && (target.offsetHeight + target.offsetTop < scrolled.clientHeight + scrolled.scrollTop
            && target.offsetTop > scrolled.scrollTop)) {
        return;
    }
    if (align === undefined || align === 0) {
        scrolled.scrollTop = target.offsetTop;
    } else if (align === 1) {
        scrolled.scrollTop = (target.offsetTop + target.clientHeight/2) - (scrolled.clientHeight/2);
    } else if (align === 2) {
        scrolled.scrollTop = target.clientHeight + target.offsetTop - scrolled.clientHeight;
    }
};
Fonction scrollIntoView.
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16

Utilisation sur une liste à puces des trois positions possibles. L'élément à positionner est l'item 7.

A noter qu'il existe une méthode du DOM, scrollIntoView, qui permet de ramener un élement dans la zone de visibilité d'un ascendant qui peut défiler mais :

  • Uniquement en position basse ou haute ; pas en position médiane.
  • Sans permettre d'éviter de modifier la position de l'élément s'il est déjà visible.

J'utilise une fonction proche de celle-ci pour assurer la visibilité d'une ligne sélectionnée dans un tableau HTML scrollable lors d'une navigation au clavier.

La méthode peut être amélioré en appliquant au défilement une transition plus fluide.