如何自動滾動（動畫） <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

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

如果您想要其他演示文稿，請更改值