JS scrollLeft和scrollTop屬性：讀寫元素左側和頂部已捲動的距離

在 JavaScript 中，使用 scrollLeft 和 scrollTop 可以讀寫移出可視區域外面的寬度和高度，具體說明如下：

• scrollLeft：讀寫元素左側已捲動的距離，即位於元素左邊界與元素中當前可見內容的最左端之間的距離。
• scrollTop：讀寫元素頂部已捲動的距離，即位於元素頂部邊界與元素中當前可見內容的最頂端之間的距離。

使用這兩個屬性可以確定捲軸的位置，或者獲取當前捲動區域內容。

範例

下面範例演示了如何設定和更直觀的獲取捲動外區域的尺寸。

<textarea id="text" rows="5" cols="25" style="float:right;">
</textarea>
<div id="div" style="height:200px;width:200px;border:solid 50px red;
    padding:50px;overflow:auto;">
<div id="info" style="height:400px;width:400px;
    border:solid 1px blue;">
</div>
</div>
<script>
    var div = document.getElementById("div");
    div.scrollLeft = 200;  // 設定盒子左邊滾出區域寬度為200畫素
    div.scrollTop = 200;  // 設定盒子頂部滾出區域高度為200畫素
    var text = document.getElementById("text");
    div.onscroll = function(){  // 註冊卷動事件處理常式
        text.value = "scrollLeft = " + div.scrollLeft + "n" +
                    "scrollTop = " + div.scrollTop + "n" +
                    "scrollWidth = " + div.scrollWidth + "n" +
                    "scrollHeight = " + div.scrollHeight;
    }
</script>

演示效果如圖所示：

---