如何像flickr主页一样进行div自动滚动

时间:2017-04-14 05:09:13

标签: css3

我想创建一个像flickr网站一样的登录页面。我试图了解他们是如何设计的,结论是他们进行了div自动滚动。我的问题是如何在页面加载时使div自动滚动。如果有任何其他方法可以实现相同的设计,那么分享。

1 个答案:

答案 0 :(得分:-1)

我不知道flickr是什么,但这是一个自动滚动的网站点:https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291我想这很容易将它弯曲到你想要的东西,使它成为水平等。< / p>

 <body>
 <div id="ecran" style='overflow:auto;width:200px;height:200px;border:solid 1px green;'>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

	
<script type='text/javascript'>
function ScrollDiv(){

   if(document.getElementById('ecran').scrollTop<(document.getElementById('ecran').scrollHeight-document.getElementById('ecran').offsetHeight)){-1
         document.getElementById('ecran').scrollTop=document.getElementById('ecran').scrollTop+1
         }
   else {document.getElementById('ecran').scrollTop=0;}
}

setInterval(ScrollDiv,50)
</script>
</body>