JSFiddle - React, Tailwind, and code Playground

by Nate Armstrong

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<h2>
Button scolls down target box to last entry with easing PURE JS
</h2>
<div id="box">
  <p>stuff</p>
</div>

<div class="button" id="onemore" tabindex="1">
  Push For One More
</div>

<div class="button" id="scroll" tabindex="2">
  Push For Auto Scroll
</div>

<div id="demo">
</div>

CSS

#box {
  overflow: scroll;
  background-color: #FFF;
  height: 150px;
}

.button {
  padding: 5px;
  border: solid 1px black;
  display: block;
  float: left;
  margin: 5px;
  background-color: white;
}

.button:focus {
  background-color: red;
}

.button:hover {
  cursor: pointer;
}

p {
  background-color: #FFA;
}

JavaScript

var box = document.getElementById("box");
var oneMore = document.getElementById("onemore");
var scroll = document.getElementById("scroll");

function addStuff() {
  box.innerHTML += "<p>One More Stuff Added</p>";
}

oneMore.addEventListener('click', function(e) {
  addStuff();
})

scroll.addEventListener('click', function(e) {
  easeScroll(box);
})


console.log();

function easeScroll(element) {
  var traveled = 0;
  var duration = 15;
  var totaldistance = element.scrollHeight - (element.clientHeight + element.scrollTop);
  var increment = parseInt(totaldistance / duration) + 1;
  annimate();
  function annimate() {
    distanceleft = totaldistance - traveled;
    possition = element.clientHeight + element.scrollTop;
    box.scrollTop += parseInt(increment);
    if ((totaldistance * 0.5 > distanceleft) && (increment > 1)) {
      increment = parseInt(increment * .9);
    }
    console.log(traveled + " " + distanceleft + " | " + increment);
    if (Math.abs(possition) >= element.scrollHeight) {
      return;
    } else {
      traveled += increment;
      requestAnimationFrame(annimate);
    }
  }
}

box.addEventListener('scroll',
  function() {
    var h = box.scrollHeight;
    var t = box.scrollTop;
    var s = box.clientHeight;
    document.getElementById("demo").innerHTML = "scrollTop: " + t + "<br>scrollHeight: " + h + "<br>clientHeight: " + s;
  })