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:

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.

Possible duplicate of [Can I change the scroll speed using css or jQuery?](https://stackoverflow.com/questions/7408100/can-i-change-the-scroll-speed-using-css-or-jquery) — Krullmizter, Feb 06 '19 at 06:12
@Krullmizter that question not have accepted answer, then how this question is duplicate? — Udhay Titus, Feb 06 '19 at 06:17
@UdhayTitus: duplicate means that the questions are the same (or similar), not that there is an answer to any of them. — virolino, Feb 06 '19 at 06:34
@virolino OP need answer but that link not given answer for him. Suppose if link has exact answer this question may be duplicate otherwise not. — Udhay Titus, Feb 06 '19 at 06:40
@UdhayTitus: the linked article actually has several answers! The fact that none of them is chosen as solution for that respective OP is a less relevant aspect. — virolino, Feb 06 '19 at 06:42
what do you mean? you do not see the scroll bar of the stackOverflow page, or you don't see the results of the code snippet? The results, I do not see either, just a "The querySelector() method " — virolino, Feb 06 '19 at 06:46
@virolino yes actually I just notice it appear only in chrome. But in chrome the scroll bar or mouse wheel are scrolling multiple lane at the time, where firefox doesn't show a scrollbar, but if you scroll with the mouse it scroll line by line. wierd. — Crocsx, Feb 06 '19 at 07:09

Mukyuu · Accepted Answer · 2019-02-06T08:51:40.627

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>

that's a good solution, that I will implement if there are no pure css alternative. also, my font are in em, so varies on screen size so I believe I will have to make a arbitrary small value for the scroll — Bobby, Feb 06 '19 at 07:53
If you're going to use javascript you might want to take a look [here](https://stackoverflow.com/questions/31223341/detecting-scroll-direction/31223774). I've tried to modify the function when detecting the direction where the scroll going earlier but didn't seems to work for me. — Mukyuu, Feb 06 '19 at 08:06
@Bobby After a few clicks, this demo looks way off in Mac Firefox 65. — Andy Hoffman, Feb 06 '19 at 08:45
Just tried using Windows Firefox 65. It's off about 1 starting point. Updated. — Mukyuu, Feb 06 '19 at 08:48

score 0 · Answer 2 · answered Feb 06 '19 at 09:06

0

If you want to scroll on click of button, then this might be useful for you

window.scrollBy( horizontal_pixels_to_scroll , vertical_pixels_to_scroll );

for more information

check this Window scrollBy() Method Javascript

answered Feb 06 '19 at 09:06

Monkey D. Luffy

181
1
3
16

How to make vertical text scroll stop at each line

2 Answers2