ScrollIntoView () che causa lo spostamento dell'intera pagina

Sto usando ScrollIntoView () per far scorrere l'elemento evidenziato in un elenco in visualizzazione. Quando scorro verso il basso ScrollIntoView (false) funziona perfettamente. Ma quando scorro verso l'alto, ScrollIntoView (true) fa sì che l'intera pagina si muova un po ', cosa che penso sia intesa. C'è un modo per evitare lo spostamento dell'intera pagina quando si utilizza ScrollIntoView (true)?

Ecco la struttura della mia pagina -

#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 proviene da ajax call. Utilizzo di mobile safari.

Grazie per il vostro aiuto in anticipo!

Potresti usare al scrollTopposto di scrollIntoView():

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

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

Se c'è più di un elemento scorrevole che vuoi scorrere, dovrai cambiare il scrollTopdi ognuno individualmente, in base alla offsetTops degli elementi intermedi. Questo dovrebbe darti il ​​controllo dettagliato per evitare il problema che stai riscontrando.

EDIT: offsetTop non è necessariamente relativo all'elemento genitore, è relativo al primo antenato posizionato. Se l'elemento genitore non è posizionato (relativo, assoluto o fisso), potrebbe essere necessario modificare la seconda riga in:

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

Risolto con:

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

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

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

Anch'io ho avuto questo problema e ho passato molte ore a cercare di affrontarlo. Spero che la mia risoluzione possa ancora aiutare alcune persone.

La mia soluzione è finita per essere:

• Per Chrome: passaggio .scrollIntoView()a .scrollIntoView({block: 'nearest'})(grazie a @jfrohn).
• Per Firefox: applicare overflow: -moz-hidden-unscrollable;sull'elemento contenitore che si sposta.
• Non testato in altri browser.

Gioca con scrollIntoViewIfNeeded()... assicurati che sia supportato dal browser.

Ho aggiunto un modo per visualizzare il comportamento imporper di ScrollIntoView - http://jsfiddle.net/LEqjm/258/ [dovrebbe essere un commento ma non ho abbastanza reputazione]

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

Il plugin jQuery scrollintoview()aumenta l'usabilità

Invece dell'implementazione DOM predefinita, puoi utilizzare un plug-in che anima il movimento e non ha effetti indesiderati. Ecco il modo più semplice per usarlo con i valori predefiniti:

$("yourTargetLiSelector").scrollintoview();

In ogni caso, vai a questo post del blog dove puoi leggere tutti i dettagli e alla fine ti porterà al codice sorgente GitHub del plugin.

Questo plugin cerca automaticamente l'elemento antenato scorrevole più vicino e lo fa scorrere in modo che l'elemento selezionato si trovi all'interno della sua porta di visualizzazione visibile. Se l'elemento è già nella porta di visualizzazione, ovviamente non fa nulla.

Utilizzando l'idea di Brilliant, ecco una soluzione che scorre solo (verticalmente) se l'elemento NON è attualmente visibile. L'idea è di ottenere il riquadro di delimitazione della finestra e l'elemento da visualizzare nello spazio delle coordinate della finestra del browser. Controlla se è visibile e, in caso contrario, scorri per la distanza richiesta in modo che l'elemento sia mostrato nella parte superiore o inferiore della finestra.

    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;
        }
    }

Aggiunta di ulteriori informazioni al @Jescopost.

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodper browser Chrome, Opera, Safari.
  Se l'elemento si trova già nell'area visibile della finestra del browser, non viene eseguito lo scorrimento .
• Element.scrollIntoView() il metodo fa scorrere l'elemento su cui è chiamato nell'area visibile della finestra del browser.

Prova il codice seguente nel mozilla.org scrollIntoView()link. ^{Pubblica per identificare il browser}

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);
    }
}

nel mio contesto, spingerebbe la barra degli strumenti appiccicosa fuori dallo schermo o entrerebbe accanto a un pulsante favoloso con assoluto.

utilizzando il più vicino risolto.

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

ho avuto lo stesso problema, l'ho risolto rimuovendo il transform:translateYCSS che ho inserito nella footerpagina.