如何连续垂直自动滚动div内容 [英] How to auto-scroll div content vertically continuously

问题描述

我需要垂直滚动包含图像的 div.任何帮助或参考将不胜感激.

解决方案

也许 这样的事情帮助?第一张和最后一张图片应该是一样的.

JS:

(function(){var box=document.getElementById('box');box.appendChild(box.firstChild.cloneNode());函数 infScroll(){box.scrollTop +=1;if(box.scrollTop===300){box.scrollTop=0;}window.requestAnimationFrame(infScroll);}window.requestAnimationFrame(infScroll);}());

HTML:

<div id="box" style="width:150px; height:100px; overflow:hidden;"><img src="http://placekitten.com/150/90"/><img src="http://placekitten.com/150/120"/><img src="http://placekitten.com/150/80"/><img src="http://placekitten.com/150/90"/>

I need to scroll the div which contains images, vertically. Any help or references will be highly appreciated.

解决方案

Maybe something like this would help? First and last images are supposed to be the same.

JS:

(function(){
  var box=document.getElementById('box');
  box.appendChild(box.firstChild.cloneNode());    

  function infScroll(){
    box.scrollTop +=1;
    if(box.scrollTop===300){
        box.scrollTop=0;
    }
    window.requestAnimationFrame(infScroll);
  }
  window.requestAnimationFrame(infScroll);
}());

HTML:

<div id="box" style="width:150px; height:100px; overflow:hidden;">
    <img src="http://placekitten.com/150/90" />
    <img src="http://placekitten.com/150/120" />
    <img src="http://placekitten.com/150/80" />
    <img src="http://placekitten.com/150/90" />
</div>

这篇关于如何连续垂直自动滚动div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！