Stick scroll to bottom

Will keep the page scrolled to the bottom unless the user scrolls up. Once the user scrolls back to bottom it continues following the bottom line.

by amatiasq

HTML

<div class="container">
  <div class="scroll-bottom">
    <p>Top</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Bottom</p>
    <p></p>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

JavaScript

const area = document.querySelector('.scroll-bottom');
let counter = 0;

const addLine = () =>
	area.insertAdjacentHTML('beforeend', `<p>${counter++} </p>`)
 
setInterval(addLine, 1000);