Autoscrollable element

autoscrollable-element.markdown

Autoscrollable element

A Pen by Alberto Iannaccone on CodePen.

License.

index.html

<div class="container">
  <div class="autoscrollable-wrapper">
    <div class="autoscrollable-content" />
  </div>
</div>

script.js

function randomString() {
  return (Math.random() + 1).toString(36).substring(7);
}

const autoscrollable = document.querySelector('.autoscrollable-content');

setInterval(() => {
  const element = document.createElement('div');
  element.append(`some random string: ${randomString()}`);
  autoscrollable.append(element);
}, 300);

style.css

.container {
  height: 150px;
  width: 200px;
  color: #001f3f;
  background: #3D9970;
  padding: 5px;
}

.autoscrollable-wrapper {
  overflow: scroll;
  max-height: 100%;
  display: flex;
  flex-direction: column-reverse;
}