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

Question

我有一个带有大量文本的div,我希望点击箭头时所有通道都可见:

CodePen

现在,有些行被跳过,因此无法读取.

是否可以减少每次点击的滚动量？

示例目前仅适用于chrome(稍后将修复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;
  }
}

下面的代码片段中的示例：

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