Javascript scrollIntoView solo en padre inmediato

como hago scrollIntoView solo desplácese al padre inmediato (por ejemplo, div con overflow-y: scroll;) y no toda la página?

Tengo una interfaz web que estoy creando para un propósito interno muy específico. Entre otros elementos en mi página hay un div con una altura determinada y overflow-y es scroll.

Tengo datos que aparecerán periódicamente en esta área y quiero que siempre se desplacen hacia abajo (por ejemplo, la salida de la consola de un subproceso en algún servidor remoto).

si uso scrollIntoViewdesplaza el overflow-y div….. pero también se desplaza por toda la página.

En una computadora con un monitor grande, esto no es un problema, pero en mi computadora portátil con una pantalla más pequeña, también se desplaza por toda la ventana, lo que definitivamente es no el comportamiento previsto/deseado.

Creo que lo que podrías estar buscando es

.scrollIntoView({block: "nearest", inline: "nearest"});

Donde sea compatible (básicamente en cualquier lugar excepto IE y SafarIE), esto hará el movimiento ‘mínimo’ para mostrar el elemento; por lo tanto, si el contenedor externo está visible, pero el elemento de destino está oculto dentro de ese contenedor, entonces debería desplazarse por el contenedor interno pero no por la página.

Creo que estás buscando una combinación de scrollTop y scrollHeight. Puede usar el primero para establecer hacia dónde desea que se desplace el div, y el segundo para obtener la altura de toda la información en el div:

var scrollyDiv = document.getElementById("container");
scrollyDiv.scrollTop = scrollyDiv.scrollHeight

setInterval(() => {
  var textnode = document.createElement("P");
  textnode.innerHTML = "Whatever"
  scrollyDiv.appendChild(textnode);  
  scrollyDiv.scrollTop = scrollyDiv.scrollHeight
}, 1000)

#container {
  height: 200px;
  overflow-y: scroll;
}

#big-content {
  height: 400px;
  background-color: green;
}

<div id="container">
  <div id="big-content"></div>
  <p>The bottom</p>
</div>

Intenté reproducir tu caso y creo que scrollIntoView() no funcionará como usted desea. Tratar de usar scrollTop en cambio. Espero que te ahorre tiempo.

const btn = document.getElementById('js-scroll');

btn.addEventListener('click', () => {
  const targets = document.querySelectorAll('.scrollable');
  
  targets.forEach(t => {
    // Scroll each item
    t.scrollTop = t.scrollHeight;
  });
});

.scroll-btn {
  position:fixed;
  left: 10px;
  top: 10px;
  padding: 10px;
  font-weight: 700;
  font-size: 16px;
}
.content {
  min-height: 100vh;
  background-color: #efefef;
  padding: 35px 10px;
}

.scrollable {
  margin: 15px; 5px;
  padding: 5px;
  background-color: #fafafa;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.scrollable-data {
  padding: 10px;
  margin-bottom: 1px;
  min-height: 600px;
  background-color: #55b7ab;
}

<button id="js-scroll" class="scroll-btn">Scroll</button>

<section class="content">
  <div class="scrollable">
    <div class="scrollable-data">Some data 1</div>
    <div class="scrollable-data">Some data 1</div>
  </div>

  <div class="scrollable">
    <div class="scrollable-data">Some data 2</div>
    <div class="scrollable-data">Some data 2</div>
  </div>

  <div class="scrollable">
    <div class="scrollable-data">Some data 3</div>
    <div class="scrollable-data">Some data 3</div>
  </div>
</section>

Solución para reaccionar 16

Aquí hay una respuesta para este problema utilizando React 16, para las personas que desean que un elemento desplazable se desplace hacia abajo en algún evento. Estaba teniendo el problema de que scrollIntoView() estaba causando que toda la ventana se ajustara, lo cual no era deseable; solo necesita el elemento de desplazamiento para desplazarse hacia abajo (como una terminal) a pedido.

Agregue una referencia al elemento con overflowY: "scroll"y usa la fórmula this.body.current.scrollTo(0, this.body.current.scrollHeight) al igual que:

constructor() {
    ...
    this.body = React.createRef() // Create a ref to your scrollable element
}
...

componentDidUpdate(prevProps, prevState) { // or whatever action you want
    // The Important Part, where you scroll to the y-coord 
    // that is the total height, aka the bottom. 
    // .current is important, as you want the version of 
    // that ref that is rendered right now.
    this.body.current.scrollTo(0, this.body.current.scrollHeight) 
    ...
}
...
render() {
   return (
      <div style={style.container}>
            <div ref={this.body} style={style.body}> // React ref tagged here
            ....
            </div>
    </div>
}