JSFiddle - React, Tailwind, and code Playground

by Arjun Krishnakumar

HTML

<div id="dynamic_div">
The Road goes ever on and on<br><br>
   Down from the door where it began.<br><br>
Now far ahead the Road has gone,<br><br>
   And I must follow, if I can,<br><br>
Pursuing it with eager feet,<br><br>
   Until it joins some larger way<br><br>
Where many paths and errands meet.<br><br>
   And whither then? I cannot say.<br><br>
</div>

CSS

#dynamic_div{
    height: 100px;
    text-align: center;
    overflow-y: scroll;
}

JavaScript

var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();

if(scrollHeight > divHeight){
    pageScrolls = scrollHeight/divHeight;
    $("#dynamic_div").animate({
        scrollTop: scrollHeight // scroll till the end of the div
    }, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}