關於滾動圖片停在瀏覽器邊界上的一點解決辦法（個人愚見）。。

   最近開始學習javascript，想寫個滾動圖片的腳本來試試。

 

   想想這種腳本的模板網上應該有許多，果斷百度之，果然一堆，然後複製了一個代碼下來試試，大概如下（向上滾動）：

 

<div id=demo style="overflow:hidden;height:150px;width:260px;background:#214984;color:#ffffff;"> <div id="demo1"> <img src="img1.gif"/> <img src="img2.gif"/> <img src="img3.gif"/> </div> <div id="demo2"></div> </div> <mce:script type="text/javascript"> var speed=30; //數字越大速度越慢 demo2.innerHTML=demo1.innerHTML; //克隆demo1爲demo2 function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0){//當滾動至demo1與demo2交界時 demo.scrollTop-=demo1.offsetHeight;} else{ demo.scrollTop++; } } var MyMar=setInterval(Marquee,speed); demo.οnmοuseοver=function() {clearInterval(MyMar)};//鼠標移上時清除定時器達到滾動停止的目的 demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠標移開時重設定時器

自己拿來試了試，發現圖片只滾動了一點便停住了，看這停位置強烈懷疑是停在了瀏覽器邊界上（實驗的3幅圖均爲240*320，瀏覽器IE6）。

 

在網上也查了些資料，感覺問題應該是處在scrollTop，offsetHeight等等之上。於是乎在demo2.innerHTML=demo1.innerHTML之後，添了

 

一句話進行驗證：

 

document.writeln(demo.offsetTop+" "+demo1.offsetHeight+" "+demo.offsetHeight+" "+document.body.offsetHeight);

 

結果呢？

 

驚奇地發現demo1.offsetHeight值爲0；

 

根據offsetHeight的定義：IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。

 

怎麼看都不可能爲0吧！

 

想想，覺得是不是給demo1添加圖片後，其本身的height並無任何變化，於是手動修改了下demo1，如下：

 

<div id="demo1" style="width:240px; height:960px ">

 

還真就能行了，圖片也滾動了，demo1.offsetHeight也有值了。

 

雖然原理依然還是不太清楚，不過從程序中明顯可以讀出，若demo1.offsetHeight爲0時，那麼圖片滾動到瀏覽器頂部時就會停住。

 

應該是在向demo1中添加圖片時，其offsetHeight是不變且爲0的，而手動添加height才能修改offsetHeight的值。

 

初學者的愚見，不知對否。

 

PS：從腳本中還能讀出，只有當demo1的總height大於demo的height時，腳本能正常運行。

 

PS: PS: 又想了想,不對,其實PS裏說的是錯的.腳本中沒哪個地方說了要demo1的總height要大於demo的height啊.於是,今天又試了試,發現其實

 

demo的scrollTop是有上界的,而這個上界應該是(從我的例子來看,3幅圖的總height爲960px,測試中我將demo的height設爲1000px):

 

scrollTop的最大值=(960+960)(demo1與demo2的總height) - 1000(demo的height)=920px  

(因爲控件認爲只要多加920px的範圍,全部圖片都至少能正常顯示一遍)

 

所以當scrollTop達到920時.將不再增加,圖片就停住了.

 

之後我對代碼又進行了一些修改,如下:

 

13行  demo2.offsetTop-demo.scrollTop<=0 改成 demo1.offsetHeight<=demo.scrollTop

(因爲demo2的offsetTop還包括了邊框距離)

 

 

那麼,結論是,要使demo1.offsetHeight<=demo.scrollTop能夠達到,至少需要:  

 

   2*demo1.height - demo.height >=demo1.height    推出 demo1.height >= demo.height; (前提:demo2是完全從demo1複製過來的)