Tengo un div con un ejemplo de frase dentro:
<div class="container"> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc active">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> </div> <button class="btn">Move</button>cuando hago clic en el botón quiero mover el desplazamiento en la frase activa, uso este código
this.el.nativeElement.querySelector('.phrase-doc.active').scrollIntoView();y funciona bien solo si el contenedor está visible en la página, pero si el contenedor no está visible, el desplazamiento de la página se mueve sobre él, quiero que el desplazamiento de la página permanezca en la misma posición y solo el desplazamiento dentro del contenedor se mueva en la frase activa y el contenedor no debe desplazarse a la vista si no está visible.
y el contenedor no debe desplazarse a la vista si no está visible.
Esto es problemático porque no hay una API que lo admita. El objetivo de scrollIntoView es hacer visible ese contenido.
Lo que podría hacer es obtener la posición de desplazamiento de cada ascendiente desplazable, guardar su valor y después de la llamada scrollIntoView restaurarlos.
El inconveniente de eso es que puede usar el desplazamiento smooth para los ascendentes desplazables (si es un requisito) y scrollIntoView (o al menos no sin trabajo adicional).
document.querySelector('.btn').addEventListener('click', () => { // here you should check all ascendants of `container` that a scrollable // instead of doing that only for window const { scrollX, scrollY } = window document.querySelector('.phrase-doc.active').scrollIntoView({ block: 'nearest', inline: 'start' }); // here you should restore the scroll for all the found elements and not only window window.scroll(scrollX, scrollY) }) .pre { height: 100vh; } .container { overflow: auto; height: 20px; } .post { height: 200vh; } <button class="btn">Move</button> <div class="pre"> </div> <div class="container"> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc active">1Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> </div> <div class="post"> </div>Tienes que tener la etiqueta dom activa.
document.querySelector('.btn').addEventListener('click',function (){ var eleActive = document.querySelector('.phrase-doc.active') eleActive.scrollIntoView() })