ScrollIntoView () provoquant le déplacement de la page entière

J'utilise ScrollIntoView () pour faire défiler l'élément en surbrillance dans une liste. Lorsque je fais défiler vers le bas, ScrollIntoView (false) fonctionne parfaitement. Mais quand je fais défiler vers le haut, ScrollIntoView (true) fait bouger un peu la page entière, ce qui, je pense, est destiné. Existe-t-il un moyen d'éviter le déplacement de la page entière lors de l'utilisation de ScrollIntoView (true)?

Voici la structure de ma page -

#listOfDivs {
  position:fixed;
  top:100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs provient d'un appel ajax. Utilisation de safari mobile.

Merci d'avance pour votre aide!

Vous pouvez utiliser à la scrollTopplace de scrollIntoView():

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle: http://jsfiddle.net/LEqjm/

S'il y a plus d'un élément défilable que vous souhaitez faire défiler, vous devrez changer le scrollTopde chacun individuellement, en fonction du offsetTops des éléments intermédiaires. Cela devrait vous donner un contrôle précis pour éviter le problème que vous rencontrez.

EDIT: offsetTop n'est pas nécessairement relatif à l'élément parent - il est relatif au premier ancêtre positionné. Si l'élément parent n'est pas positionné (relatif, absolu ou fixe), vous devrez peut-être changer la deuxième ligne en:

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

Corrigé avec:

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

voir: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

J'ai eu ce problème aussi et j'ai passé de nombreuses heures à essayer de le résoudre. J'espère que ma résolution pourra encore aider certaines personnes.

Mon correctif a fini par être:

• Pour Chrome: passage .scrollIntoView()à .scrollIntoView({block: 'nearest'})(merci à @jfrohn).
• Pour Firefox: appliquez overflow: -moz-hidden-unscrollable;sur l'élément conteneur qui change.
• Non testé dans d'autres navigateurs.

Jouez avec scrollIntoViewIfNeeded()... assurez-vous qu'il est pris en charge par le navigateur.

J'ai ajouté un moyen d'afficher le comportement important du ScrollIntoView - http://jsfiddle.net/LEqjm/258/ [cela devrait être un commentaire mais je n'ai pas assez de réputation]

$("ul").click(function() {
    var target = document.getElementById("target");
if ($('#scrollTop').attr('checked')) {
    target.parentNode.scrollTop = target.offsetTop;    
} else {
        target.scrollIntoView(!0);
}
});

Le plugin jQuery scrollintoview()augmente la convivialité

Au lieu de l'implémentation DOM par défaut, vous pouvez utiliser un plugin qui anime le mouvement et n'a aucun effet indésirable. Voici la façon la plus simple de l'utiliser avec les valeurs par défaut:

$("yourTargetLiSelector").scrollintoview();

Quoi qu'il en soit, rendez-vous sur ce billet de blog où vous pouvez lire tous les détails et vous obtiendrez éventuellement le code source GitHub du plugin.

Ce plugin recherche automatiquement l'élément ancêtre défilable le plus proche et le fait défiler pour que l'élément sélectionné soit à l'intérieur de son port de vue visible. Si l'élément est déjà dans le port de vue, il ne fait rien bien sûr.

En utilisant l'idée de Brilliant, voici une solution qui ne défile (verticalement) que si l'élément n'est PAS actuellement visible. L'idée est d'obtenir la boîte englobante de la fenêtre et l'élément à afficher dans l'espace de coordonnées de la fenêtre du navigateur. Vérifiez s'il est visible et sinon, faites défiler la distance requise pour que l'élément soit affiché en haut ou en bas de la fenêtre.

    function ensure_visible(element_id)
    {
        // adjust these two to match your HTML hierarchy
        var element_to_show  = document.getElementById(element_id);
        var scrolling_parent = element_to_show.parentElement;

        var top = parseInt(scrolling_parent.getBoundingClientRect().top);
        var bot = parseInt(scrolling_parent.getBoundingClientRect().bottom);

        var now_top = parseInt(element_to_show.getBoundingClientRect().top);
        var now_bot = parseInt(element_to_show.getBoundingClientRect().bottom);

        // console.log("Element: "+now_top+";"+(now_bot)+" Viewport:"+top+";"+(bot) );

        var scroll_by = 0;
        if(now_top < top)
            scroll_by = -(top - now_top);
        else if(now_bot > bot)
            scroll_by = now_bot - bot;
        if(scroll_by != 0)
        {
            scrolling_parent.scrollTop += scroll_by; // tr.offsetTop;
        }
    }

Ajout de plus d'informations à @Jescopublier.

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodpour les navigateurs Chrome, Opera, Safari.
  Si l'élément se trouve déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu .
• Element.scrollIntoView() La méthode fait défiler l'élément sur lequel il est appelé dans la zone visible de la fenêtre du navigateur.

Essayez le code ci-dessous dans le mozilla.org scrollIntoView()lien. ^{Publier pour identifier le navigateur}

var xpath = '//*[@id="Notes"]';
ScrollToElement(xpath);

function ScrollToElement(xpath) {
    var ele = $x(xpath)[0];
    console.log( ele );

    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if (isChrome) { // Chrome
        ele.scrollIntoViewIfNeeded();
    } else {
        var inlineCenter = { behavior: 'smooth', block: 'center', inline: 'start' };
        ele.scrollIntoView(inlineCenter);
    }
}

dans mon contexte, il pousserait la barre d'outils collante hors de l'écran, ou entrerait à côté d'un bouton fab avec absolu.

en utilisant le plus proche résolu.

const element = this.element.nativeElement;
const table = element.querySelector('.table-container');
table.scrollIntoView({
  behavior: 'smooth', block: 'nearest'
});

J'ai eu le même problème, je l'ai résolu en supprimant le transform:translateYCSS que j'ai placé sur footerla page.