再說意義之前，前說一下這兩個屬性的適用范圍：
注意：這兩個屬性只能用於元素設置了overflow的css樣式中。否者這兩個屬性沒有任何意義。且overflow的值不能為visible，但可以為hidden,auto,scroll的之中，但是hidden最常見。
注意：在對這兩個參數設置值時，直接用數字就可以了，否者不起作用。
javascript中元素的scrollLeft和scrollTop屬性的參數意義：
scrollLeft：是該元素的顯示（可見）的內容與該元素實際的內容的距離。
即設置scrollleft就如同你拖動水平滾動條一樣。假如你的頁面太大，瀏覽器的寬度不夠，就會出現滾動條。一開始scrollLeft的值為0，你就看到了你的頁面最左邊的內容。而不顯示超過瀏覽器的那部分，當你向右拖動滾動條時，scrollLeft的值在增大，你就看到了右邊因隱藏的東西，而看不到左邊隱藏的部分。他就會從scrollLeft的位置開始顯示，而不顯示0-scrollLeft的元素內容。即：該元素的顯示位置與實際內容的位置的距離變大。。。
簡單了說：元素會從scrollLeft的位置顯示該元素的內容。
假如不懂的話，你就把元素的所有內容都在紙畫出拉，元素的最左邊為0,顯示的寬度為10,那就就能看到0-10的位置，假如scrollLeft為20的話，你就能看到從20的位置開始顯示，向后顯示10個
那么scrollTop和scrollLeft一樣，只不過變成了垂直了而已。
實現內容的滾動效果（其中內容可以是任何東西：圖片，文字，等等）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>圖片滾動</title> 6 </head> 7 <body> 8 <style type="text/css"> 9 <!-- 10 #demo { 11 background: #FFF; 12 /*必須的*/ 13 overflow:hidden; 14 border: 1px dashed #CCC; 15 width: 100px; 16 } 17 #demo img { 18 border: 3px solid #F2F2F2; 19 } 20 #indemo { 21 float: left; 22 width: 800%; 23 } 24 #demo1 { 25 float: left; 26 } 27 #demo2 { 28 float: left; 29 } 30 --> 31 </style> 32 <div id="demo"> 33 <div id="indemo"> 34 <div id="demo1"> 35 <!--你這里可以變成圖片--> 36 <a href="#">0</a> 37 <a href="#">1</a> 38 <a href="#">2</a> 39 <a href="#">4</a> 40 <a href="#">5</a> 41 <a href="#">6</a> 42 <a href="#">7</a> 43 <a href="#">8</a> 44 <a href="#">9</a> 45 <a href="#">0</a> 46 </div> 47 <div id="demo2"></div> 48 </div> 49 </div> 50 <script> 51 <!-- 52 var speed=10; 53 var tab=document.getElementById("demo"); 54 var tab1=document.getElementById("demo1"); 55 var tab2=document.getElementById("demo2"); 56 //用於讓tab1的內容與tab2的內容一樣 57 tab2.innerHTML=tab1.innerHTML 58 function Marquee(){ 59 //當元素要顯示tab2的內容時，讓他去顯示tab1的內容，因為tab1與tab2的內容一樣，就實現了滾動，因為速度太快了，所以你就堪稱他是連續的了 60 if(tab2.offsetWidth-tab.scrollLeft<=0){ 61 tab.scrollLeft-=tab1.offsetWidth 62 } 63 else{ 64 tab.scrollLeft++; 65 } 66 } 67 var MyMar=setInterval(Marquee,speed); 68 tab.onmouseover=function() {clearInterval(MyMar)}; 69 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 70 --> 71 </script> 72 </body> 73 </html>
轉自
轉自：http://m.blog.csdn.net/article/details?id=16903219