JavaScript 使用 scrollLeft 和 scrollTop

■知識(shí)點(diǎn)

使用scrollLeft和scrollTop可以讀寫移出可視區(qū)域外面的寬度和高度，具體說(shuō)明如下。

    scrollLeft：讀寫元素左側(cè)己滾動(dòng)的距離，即位于元素左邊界與元素中當(dāng)前可見內(nèi)容的最左端之間的距離。

    scrollTop：讀寫元素頂部己滾動(dòng)的距離，即位于元素頂部邊界與元素中當(dāng)前可見內(nèi)容的最頂端之間的距離。

使用這兩個(gè)屬性可以確定滾動(dòng)條的位置，或者獲取當(dāng)前滾動(dòng)區(qū)域內(nèi)容。

■實(shí)例設(shè)計(jì)

下面的示例演示了如何設(shè)置和更直觀地獲取滾動(dòng)外區(qū)域的尺寸。

<textarea id="text" rows="5" cols="25" style="float:right;">

</textarea>

<div id="div" style="height:200px;width:2OOpx;border:solid 50px red;padding:50px;overflow:auto;">

    <div id="info" style="height:400px;width:400px;border:solid lpx blue;"></div> 

</div>

<script>

var div = document.getElementByld ("div");

div.scrollLeft = 200;                            //設(shè)置盒子左邊滾出區(qū)域?qū)挾葹?00px

div.scrollTop = 200;                    //設(shè)罝盒子頂部滾出區(qū)域高度為200px

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

div.onscroll = function(){            //注冊(cè)滾動(dòng)事件處理函數(shù)

    text.value =     "scrollLeft= " + div.scrollLeft + "\n" +

                       "scrollTop = " + div.scrollTop + "\n" +

                       "scrollWidth = " + div.scrollWidth + "\n" +

                       "scrollHeight= " + div.scrollHeight ;

}

</script>