How to make vertical text scroll stop at each line

var el = document.getElementsByClassName("text")[0];
var startingscroll = 2;
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
     startingscroll = 3;
}

el.scrollTop = startingscroll;

function scrolldown(){
  el.scrollTop += 18;
  if(el.scrollTop == 399){
    el.scrollTop = 398;
  }
}

function scrollup(){
  el.scrollTop -= 18;
  if(el.scrollTop == 0){
    el.scrollTop = startingscroll;
  }
}

.text{
  height:15px;
  width:200px;
  overflow:auto;
}
.parent{
  width:200px;
  display: table-row;
}
.scroll{
    display: table-cell;
}
.text::-webkit-scrollbar{
    width: 0px;
    background: transparent;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="parent">
<div class="text">The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

If the selector matches an ID in document that is used several times (Note that an "id" should be unique within a page and should not be used more than once), it returns the first matching element.

For more information about CSS Selectors, visit our CSS Selectors Tutorial and our CSS Selectors Reference.
</div>
<div class="scroll">
<i style="font-size:16px" class="fa" onclick="scrollup()">&#xf106;</i><br/>
<i style="font-size:16px" class="fa" onclick="scrolldown()">&#xf107;</i>
</div>
</div>