無縫滾動可以在flash中實現。但使用javascript同樣具有效果。今天我們要看的就是javascript實現無縫滾動。要使用javascript實現無縫滾動，需要掌握以下知識：
1) setInterval函數的使用
2) document.getElementById(v)函數
3) 設置對象的innerHTML
4) offsetTop屬性 : 某個對象相對於父對象的頂端距離
5) scrollTop屬性 : 某個對象向上滾動的量
6) offsetHeight : 某個對象的有效高度
原理分析：
需要一個大的層"demo"包含兩份要滾動的內容，這兩份分別至於demo1與demo2中。結構如下：
<div id="demo">
<div id="demo1">
content....
</div>
<div id="demo2">
</div>
</div>
利用js將demo1的內容複製一份到demo2中。實現的方法是：demo2.innerHTML = demo1.innerHTML;
然後開始將demo向上滾動，當demo2的offsetTop - demo.scrollTop 小於或等於0時，我們將demo的scrollTop滾回置頂部( demo.scrollTop -= demo1.offsetHeight)
注意：demo的高度必須足夠小（不要超過demo1的高度）
具體代碼如下：
<html>
<head>
<title>垂直無縫滾動實例</title>
<style type="text/css">
#demo { width:120px; height:500px; overflow:hidden; border:solid 3px red; }
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<img src="images/js01.jpg" width="120" height="120" />
<img src="images/js02.jpg" width="120" height="120" />
<img src="images/js03.jpg" width="120" height="120" />
<img src="images/js04.jpg" width="120" height="120" />
<img src="images/js05.jpg" width="120" height="120" />
<img src="images/js06.jpg" width="120" height="120" />
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed = 40;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML = demo1.innerHTML; //複製demo1的內容到demo2中。
function marquee()
{ // 若第一遍的內容已全部顯示完畢，則重新開始顯示
if(demo2.offsetTop - demo.scrollTop <= 0) { demo.scrollTop -= demo1.offsetHeight; }
else { demo.scrollTop++; } // 否則向上滾動1個像素的量。
}
var myMarquee = setInterval(marquee,speed); // 按一定的速度滾動
demo.onmouseover = function() { clearInterval(myMarquee); } //指向時停止滾動
demo.onmouseout = function() { myMarquee = setInterval(marquee,speed); } // 移開時繼續滾動
</script>
</body>
</html>