Javascript scrolling algorithm -

i'm building javascript application requires custom scrolling implemented text overflows container. in environment i'm building there no scroll bars, need create 2 buttons, 1 , 1 down, user can user scroll text.

i've created basic implementation this jsfiddle.

what i'm struggling come clean solution stops scrolling when bottom of text visible @ bottom of container, , visa versa, preventing scroll text moving up/down forever.

perhaps there known algorithm this? i'm looking way without plug-ins , without jquery.

here javascript:

var upbutton = document.getelementbyid('upbutton'); var downbutton = document.getelementbyid('downbutton');  var text = document.getelementbyid('inner'); var container = document.getelementbyid('container');  upbutton.addeventlistener('click', function () {     movetext(1); });  downbutton.addeventlistener('click', function () {     movetext(-1); });  function movetext(direction) {     var texttop = parseint(window.getcomputedstyle(text).top);     var moveto = texttop + (direction * 50);      text.style.top = moveto + "px" } 

html:

<div id="container">     <div id="inner">nam liber ... long text ... facilisi.</div> </div> <div class="buttons">     <button id="upbutton" type="button">up</button>     <button id="downbutton" type="button">down</button> </div> 

css:

#container {     background: #f1f1f1;     width: 300px;     height: 200px;     margin: 0 auto;     overflow: hidden;     font-size: 20px;     line-height: 30px;     padding: 20px; } #inner {     position: relative;     top: 0; } 

why don't use scrolltop property ?

function movetext(direction) {     var moveto = direction * 50;     container.scrolltop += moveto;     } 

var upbutton = document.getelementbyid('upbutton');  var downbutton = document.getelementbyid('downbutton');    var text = document.getelementbyid('inner');  var container = document.getelementbyid('container');    upbutton.addeventlistener('click', function () {      movetext(1);  });    downbutton.addeventlistener('click', function () {      movetext(-1);  });    function movetext(direction) {      var moveto = direction * 50;      container.scrolltop += moveto;  }

#container {      background: #f1f1f1;      width: 300px;      height: 200px;      margin: 0 auto;      overflow: hidden;      font-size: 20px;      line-height: 30px;      padding: 20px;  }  #inner {      position: relative;      top: 0;  }  .buttons {      text-align: center;      padding: 30px;  }  button {      font-size: 20px;  }

<div id="container">      <div id="inner">nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>  </div>  <div class="buttons">      <button id="upbutton" type="button">up</button>      <button id="downbutton" type="button">down</button>  </div>