原生js無限迴圈單條向上滾動
阿新 • • 發佈:2021-01-18
技術標籤:前端
body { background-color:#FFFFFF; } .out { overflow:hidden; height:21px; margin-top:50px; padding-left:20px; } <div class="out" id="roll"> <div>第一屏滾動的文字</div> <div>第二屏滾動的文字</div> <div>第三屏滾動的文字</div> <div>第四屏滾動的文字</div> <div>第五屏滾動的文字</div> <div>第六屏滾動的文字</div> <div>第七屏滾動的文字</div> <div>第八屏滾動的文字</div> </div> var speed = 30; var delay = 1000; var height = 21; var time; window.onload = function() { var area = document.getElementById("roll"); area.innerHTML += area.innerHTML; function scroll() { if (area.scrollTop % height == 0) { clearInterval(time); setTimeout(start, delay); } else { area.scrollTop++; if (area.scrollTop >= area.scrollHeight / 2) { area.scrollTop = 0; } } } function start() { time = setInterval(scroll, speed); area.scrollTop++; } setTimeout(start, delay); }