Javascript scrollIntoView only in immediate parent

I think what you might be looking for is

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

Where supported (basically anywhere except IE and SafarIE) this will do the 'least' movement to show the element; so if the outer container is visible, but the target element is hidden inside that container -- then it should scroll the inner container but not the page.

I think you're looking for a combination of scrollTop and scrollHeight. You can use the first to set where you want the div to scroll to, and the second to get the height of all the info in the 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>

I tried to reproduce your case and I think that scrollIntoView() will not work as you wish. Try to use scrollTop instead. Hope it will save your time.

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>

Solution for React 16

Here is an answer for this problem using React 16, for people who want to have a scrollable element scroll to its bottom upon some event. I was having the problem that scrollIntoView() was causing the whole window to adjust, which was undesirable; just need the scrolling element to scroll to the bottom (like a terminal) on demand.

Add a ref to the element with overflowY: "scroll", and use the formula this.body.current.scrollTo(0, this.body.current.scrollHeight) like so:

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