Question

我有一个包含大量文本的div，我希望在单击箭头时所有通道都可见：

现在，某些行已跳过，因此不可读。

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

示例目前仅适用于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;
  }
}

下面的代码段示例：

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

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

2 个答案: