JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<button type="button" id="scrollToBottom">Scroll To Bottom</button>

<div id='ChatLog'>Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very...

CSS

#ChatLog{
  height: 400px;
  background: lightgrey;
  border: 3px solid black;
  overflow: auto;
}

JavaScript

document.getElementById('scrollToBottom').addEventListener('click', scrollToBottom);

function scrollToBottom() {
    var chatLog = document.getElementById('ChatLog');
    var style = window.getComputedStyle(chatLog); // style of ChatLog div
    var height = parseInt(style.height); // height above ChatLog div
  
  
    if ((chatLog.scrollTop + height) < chatLog.scrollHeight){ // scrollHeight = scrollTop + height
        setTimeout(function() {
            chatLog.scrollTop += 50;  // scroll down 50 pixels
            scrollToBottom();
        }, 25);
    }
}