ScrollIntoView () haciendo que toda la página se mueva

Estoy usando ScrollIntoView () para desplazar el elemento resaltado en una lista a la vista. Cuando me desplazo hacia abajo, ScrollIntoView (falso) funciona perfectamente. Pero cuando me desplazo hacia arriba, ScrollIntoView (verdadero) hace que toda la página se mueva un poco, lo que creo que está previsto. ¿Hay alguna manera de evitar que toda la página se mueva cuando se usa ScrollIntoView (verdadero)?

Aquí está la estructura de mi página:

#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 de una llamada ajax. Usando safari móvil.

¡Gracias por su ayuda de antemano!

Podrías usar en scrollToplugar de scrollIntoView():

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

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

Si hay más de un elemento desplazable por el que desea desplazarse, deberá cambiar el scrollTopde cada uno de forma individual, según la offsetTops de los elementos intermedios. Esto debería darle un control detallado para evitar el problema que está teniendo.

EDITAR: offsetTop no es necesariamente relativo al elemento padre, es relativo al primer antepasado posicionado. Si el elemento principal no está posicionado (relativo, absoluto o fijo), es posible que deba cambiar la segunda línea a:

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

Arreglado con:

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

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

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

Yo también tuve este problema y pasé muchas horas tratando de solucionarlo. Espero que mi resolución pueda ayudar a algunas personas.

Mi solución terminó siendo:

• Para Chrome: cambiando .scrollIntoView()a .scrollIntoView({block: 'nearest'})(gracias a @jfrohn).
• Para Firefox: aplique overflow: -moz-hidden-unscrollable;en el elemento contenedor que cambia.
• No probado en otros navegadores.

Juega con scrollIntoViewIfNeeded()... asegúrate de que sea compatible con el navegador.

Agregué una forma de mostrar el comportamiento inadecuado de ScrollIntoView: http://jsfiddle.net/LEqjm/258/ [debería ser un comentario pero no tengo suficiente reputación]

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

El complemento jQuery scrollintoview()aumenta la usabilidad

En lugar de la implementación de DOM predeterminada, puede usar un complemento que anime el movimiento y no tenga efectos no deseados. Esta es la forma más sencilla de usarlo con valores predeterminados:

$("yourTargetLiSelector").scrollintoview();

De todos modos, diríjase a esta publicación de blog donde puede leer todos los detalles y eventualmente lo llevará al código fuente de GitHub del complemento.

Este complemento busca automáticamente el elemento antepasado desplazable más cercano y lo desplaza para que el elemento seleccionado esté dentro de su puerto de vista visible. Si el elemento ya está en el puerto de visualización, por supuesto, no hace nada.

Usando la idea de Brilliant, aquí hay una solución que solo se desplaza (verticalmente) si el elemento NO está visible actualmente. La idea es que el cuadro delimitador de la ventana gráfica y el elemento se muestren en el espacio de coordenadas de la ventana del navegador. Compruebe si está visible y, si no, desplácese por la distancia requerida para que el elemento se muestre en la parte superior o inferior de la ventana gráfica.

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

Añadiendo más información para @Jescopublicar.

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodpara los navegadores Chrome, Opera, Safari.
  Si el elemento ya se encuentra dentro del área visible de la ventana del navegador, no se realiza ningún desplazamiento .
• Element.scrollIntoView() El método desplaza el elemento en el que se llama al área visible de la ventana del navegador.

Pruebe el siguiente código en el mozilla.org scrollIntoView()enlace. ^{Publicar para identificar el navegador}

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

en mi contexto, empujaría la barra de herramientas adhesiva fuera de la pantalla, o ingresaría junto a un botón fabuloso con absoluto.

usando el resuelto más cercano.

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

Tuve el mismo problema, lo solucioné eliminando el transform:translateYCSS que coloqué en el footerde la página.