如何使垂直文本滚动停止在每一行

Question

我有大量的文字股利，我想，所有的车道上的箭头点击时可见：

CodePen

眼下，一些行将被忽略，因此无法读取。

是否有可能降低单次点击滚动量？

例如只能在此刻铬（将修复Firefox的更新版本）。

.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仅如果可能的话，并没有jQuery的，请。

Answer 1

好了，我要去模拟滚动条是如何工作的。首先，我进口FontAwesome风格<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">。并利用他们在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>

然后我躲在从.text溢出滚动条：

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

下面的函数是箭头，你问。

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

实施例在以下片段：

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>

Answer 2

如果你想在点击按钮滚动，那么这可能是对你有用

window.scrollBy( horizontal_pixels_to_scroll , vertical_pixels_to_scroll );

欲获得更多信息

检查这个Window scrollBy() Method Javascript