[英]How to auto scroll (animate) a <div> with text, with overflow set to auto or scroll?
I have a simple <div>
with a lot of text and overflow:scroll;
我有一个简单的<div>
其中包含大量文本和overflow:scroll;
I need the text to automatically start scrolling once it appears on the page but I can't seem to find a straightforward answer. 一旦文本出现在页面上,我就需要文本自动开始滚动,但是我似乎找不到一个简单的答案。 I'm sure there's a javascript solution out there. 我确定那里有一个javascript解决方案。
I've seen some similar questions but they people asked how to keep the text scrolling while user types in a text field (which is not this case) or how to jump to the bottom of the content when user hovers (which is also not the case) 我看到了一些类似的问题,但是他们问人们如何在用户在文本字段中键入内容时保持文本滚动(不是这种情况),或者在用户悬停时如何跳到内容底部(这也不是)。案件)
This is what I have: 这就是我所拥有的:
.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>
I just don't know what to do next or what are my options to make the text scroll automatically. 我只是不知道下一步该怎么办,或者我有什么选择来使文本自动滚动。
<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>
Try this 尝试这个
here is my solution: 这是我的解决方案:
JS: 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: HTML:
<div id="autoScroll" class="textContainer">
<p>bunch of text (I would paste Lorem Ipsum here but it's not necessary!</p>
</div>
Change the values in case you want a different presentation 如果您想要其他演示文稿,请更改值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.