Question

我有一个简单的<div>，上面有很多文字和overflow:scroll;

我需要文本一旦出现在页面上就自动开始滚动，但是我似乎找不到一个简单的答案。我确定那里有一个javascript解决方案。

我看到了一些类似的问题，但是他们问人们如何在用户输入文本字段时保持文本滚动（不是这种情况），或者当用户悬停时如何跳到内容底部（也不是这样

这就是我所拥有的：

.textContainer {
  overflow: auto;
  width:260px;
  height:250px;
  background-color: white;
}

<div class="textContainer">
  <p>bunch of text (I would paste Lorem Ipsum here but it's not necessary!</p>
</div>

我只是不知道下一步该怎么办，或者我有什么选择来使文本自动滚动。

Answer 1

<h1>This is the beginning </h1>
<button onclick="scroll();">Click Me!</button>
<br><br><br><br><br><br><br><br><br><br><br>
<h1>This is the end</h1>
<script>function scroll() {
  window.scrollTo(0, 200);
}</script>

尝试一下

Answer 2

这是我的解决方法：

JS：

var elem = document.getElementById('autoScroll'); //YOUR DIV ELEMENT WHICH YOU WANT TO SCROLL
var scroll = 0; //SETTING INITIAL SCROLL TO 0

window.setInterval(function(){ 

 if(elem.scrollTop > scroll)
  scroll = elem.scrollTop;

 elem.scrollTo({ top: scroll, behavior: 'smooth' }) //SCROLL THE ELEMENT TO THE SCROLL VALUE WITH A SMOOTH BEHAVIOR
 scroll += 1; //AUTOINCREMENT SCROLL
}, 50); //THIS WILL RUN IN EVERY 50 MILISECONDS

HTML：

<div id="autoScroll" class="textContainer">
 <p>bunch of text (I would paste Lorem Ipsum here but it's not necessary!</p>
</div>

在需要其他演示文稿时更改值

如何使用文本自动滚动（动画）<div>，且溢出设置为自动或滚动？

2 个答案: