Intermittent and seamless scrolling effect (the effect of recording with gif is not very good, if you are interested, you can down the code), the specific content is as follows
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Seamless scroll</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;} .block{position: relative;width: 500px;height: 400px;overflow: hidden;} .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;} .item:nth-child(2n){background: #000} </style> <script> var scrollUp=(function(){ return function(json){ var objScroll = document.getElementById(json.id); objScroll.scrollTop = 0; objScroll.innerHTML += objScroll.innerHTML; if(json.on){ function scrollIng(){ if(objScroll.scrollTop >= objScroll.scrollHeight) { objScroll.scrollTop = 0; }else{ objScroll.scrollTop ++; } } var myScroll = setInterval(function(){scrollIng()},30); objScroll.onmouseover = function(){ clearInterval(myScroll); } objScroll.onmouseout = function(){ myScroll = setInterval(function(){scrollIng()},30); } }else{ var timer; function startScroll(){ timer=setInterval(function(){scrollUp()},30); objScroll.scrollTop++; } function scrollUp(){ if(objScroll.scrollTop % json.height==0){ clearInterval(timer); setTimeout(startScroll,2000); }else{ objScroll.scrollTop++; if(objScroll.scrollTop >= objScroll.scrollHeight/2){ objScroll.scrollTop =0; } } } setTimeout(startScroll,1000); } } })() window.onload=function(){ //on:Intermittent scroll/Seamless scroll height: Intermittent scrollUp({on:true,id:'block'}); scrollUp({id:'block2',height:120}); } </script></head><body> <div> <div id="block"> <div>1 Seamless scroll</div> <div>2 Seamless scroll</div> <div>3 Seamless scroll</div> <div>4 Seamless scroll</div> <div>5 Seamless scroll</div> <div>6 Seamless scroll</div> <div>7 Seamless scroll</div> <div>8 Seamless scroll</div> <div>9 Seamless scroll</div> <div>10 Seamless scroll</div> <div>11 seamless scroll</div> <div>12 seamless scroll</div> <div>13 seamless scroll</div> <div>14 seamless scroll</div> <div>15 seamless scroll</div> </div> </div> <div> <div id="block2"> <div>1 intermittent scroll</div> <div>1 intermittent scroll</div> <div>2 intermittent scroll</div> <div>3 intermittent scroll</div> <div>4 intermittent scroll</div> <div>5 intermittent scroll</div> <div>6 intermittent scroll</div> <div>7 intermittent scroll</div> <div>8 intermittent scroll</div> <div>9 intermittent scroll</div> <div>10 intermittent scroll</div> <div>11 intermittent scroll</div> <div>12 intermittent scroll</div> <div>13 intermittent scroll</div> <div>14 intermittent scroll</div> <div>15 intermittent scroll</div> </div> </div> </div></body></html>Note:
1. The box block should be css overflow and hide: overflow:hidden
2. There are two functions: intermittent scrolling/seamless scrolling
3. First copy a piece of exactly the same code and scroll seamlessly: the execution timer keeps increasing the scrollTop value. When the scrollTop value is greater than the box height, set scrollTop to 0 and start over again. Intermittent scrolling is added on this basis, setTimeout is executed intermittently, and the specified height stops when scrollTop arrives.
4. Question: SetInterval(function(){scrollIng()},30); in the code, it can be executed by writing this way, setInterval('scrollIng()',30); this won't work. Is there any great master's guidance? What's the difference between the two? What is the mechanism?
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.