Défilement vers un élément dans un div

Question

J'ai un div positionné de manière absolue qui agit comme une fenêtre modale au centre de la page. La fenêtre modale est défilable verticalement avec une barre de défilement sur le côté droit. La page elle-même est également défilable verticalement avec une barre de défilement sur la droite. J'aimerais pouvoir cliquer sur un lien et faire défiler la fenêtre modale vers l'élément lié.

Je peux très bien y parvenir en utilisant target.scrollIntoView(); mais la page entière défile avec la fenêtre modale - je voudrais que la page ne bouge pas et que la fenêtre modale défile. Si j'utilise scrollIntoView (false), la page elle-même ne défile pas, alors que la fenêtre modale le fait, mais l'élément cible se trouve en bas de la fenêtre alors que je le souhaite en haut.

Y a-t-il un moyen de compenser manuellement la position de la cible dans la div? c'est-à-dire si j'utilise scrollIntoView (faux), la cible est affichée au bas de la div - si je pouvais alors la compenser par la hauteur de la fenêtre de vue, je devrais être capable de la déplacer vers le haut ..?

Remarque: Je ne peux pas utiliser JQuery ou similaire pour cela.

Merci d'avance pour toute aide.

Answer 1

Vous pouvez tester l'affectation de valeurs entières à la propriété scrollTop.

Answer 2

Voici une démonstration en direct que je pense fait ce que vous cherchez: http://jsfiddle.net/QN3mK/

Le code pour le faire est la suivante: (vérifier principalement la fonction scrollFunc())

function scrollFunc() { 
    var est = document.getElementById('est'); 
    var docPos = f_scrollTop(); 
    est.scrollIntoView(); 
    window.scrollTo(0,docPos); 
} 

function f_scrollTop() { 
    return f_filterResults (
     window.pageYOffset ? window.pageYOffset : 0, 
     document.documentElement ? document.documentElement.scrollTop : 0, 
     document.body ? document.body.scrollTop : 0 
    ); 
} 

function f_filterResults(n_win, n_docel, n_body) { 
    var n_result = n_win ? n_win : 0; 
    if (n_docel && (!n_result || (n_result > n_docel))) 
     n_result = n_docel; 
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result; 
} 

Les deux deuxièmes fonctions sont juste un moyen compatible avec tous les navigateurs que j'ai trouvé pour obtenir la position de défilement actuelle d'une page. Donc ce que cela fait est de trouver un élément (probablement dans un div scrollable), obtient la position de défilement actuelle de la page, fait défiler l'élément dans la vue (qui le placera en haut de la div scrollable) là où c'était. Probablement pas une solution idéale, mais il fera le travail.