javascript - 如何自动滚动(动画)带有文本的 <div>，溢出设置为自动或滚动？

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

这是我的解决方案:

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>

如果您想要不同的呈现方式，请更改值