How to make vertical text scroll stop at each line

Question

I have a div with a lot of text, I want that all the lanes are visible when clicking on the arrow:

CodePen

Right now, some lines are skipped and therefore unreadable.

Is it possible to reduce the scroll amount per click?

Example works only in chrome at the moment (will fix for firefox later).

.text{
  height:15px;
  width:200px;
  overflow:auto;
}

<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>

.text{
  height:15px;
  width:200px;
  overflow:auto;
}

Css only if possible, and no jquery, please.

Answer 1

Well, I'm going to simulate how the scroll bar works. First off, I'm importing FontAwesome style <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">. And using them on div class="scroll":

<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>

Then I'm hiding the scroll bar from .text overflow:

.text::-webkit-scrollbar{
    width: 0px;
    background: transparent;
}

The following function is for the arrow as you asked.

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;
  }
}

Example in snippet below:

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>