Bottom Scroll

by Luong Dung

HTML

<div class="box">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>
<button class="add">Add</button>

CSS

.box {
  height: 200px;
  width: 100px;
  border: 1px solid;
  overflow-y: scroll;
  word-break: break-all;
  overflow-x: hidden;
}

JavaScript

$(function(){
	var he = $('.box').height();
  var i =$('.box').children().length+1;
  var $f=  $('.box');
  $('.box').scrollTop($('.box')[0].scrollHeight);
  $('.add').on('click', function(){
  	$('.box').append("<p>"+i+"</p>");
   	$f.children('p:nth-child(-n+1)').hide();
    $('.box').scrollTop($('.box')[0].scrollHeight);
    i++;
  });
});