讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議133:謹慎計算滾動區域大小 >

建議133:謹慎計算滾動區域大小

scrollLeft和scrollTop屬性比較特殊,見表6.5。利用它們可以定義當拖動滾動條時移出可視區域外的寬度和高度。實際上,可以利用這兩個屬性設定滾動條的位置,也可以使用它們獲取當前滾動區域內容。

下面這個示例演示了如何設置和更直觀地獲取滾出區域的尺寸。


<textarearows="5"cols="25"></textarea>

<p>

<p></p>

</p>

var p=document.getElementById("p");

p.scrollLeft=200;

p.scrollTop=200;

var text=document.getElementById("text");

p.onscroll=function{

text.+p.scrollLeft+"\n"+

"scrollTop="+p.scrollTop+"\n"+

"scrollWidth="+p.scrollWidth+"\n"+

"scrollHeight="+p.scrollHeight;

}


上面代碼運行後呈現的效果如圖6.9所示。

圖 6.9 scrollLeft和scrollTop屬性指示區域示意圖