JS scroll事件：頁面捲動

在 JavaScript 中，scroll 事件用於在瀏覽器視窗內移動文件的位置時觸發，如通過鍵盤箭頭鍵、翻頁鍵或空格鍵移動穩定位置，或者通過捲軸捲動穩定位置。利用該事件可以跟蹤文件位置變化，及時調整某些元素的的顯示位置，確保它始終顯示在螢幕可見區域內中。

範例

在下面範例中，控制紅色小盒子始終位於視窗內坐標為（100px，100px）的位置。

<div id="box"></div>
<script>
    var box = document.getElementById("box");
    box.style.position = "absolute";
    box.style.backgroundColor = "red";
    box.style.width = "200px";
    box.style.height = "160px";
    window.onload = f;  //頁面初始化時固定其位置
    window.onscroll = f;  //當文件位置發生變化時重新固定其位置
    function f(){  //元素位置固定函數
        box.style.left = 100 + parseInt(document.body.scrollLeft) + "px";
        box.style.top = 100 + parseInt(document.body.scrollTop) + "px";
    }
</script>
<div style="height:2000px;width:2000px;"></div>

還有一種方法，就是利用 settimeout() 函數實現每間隔一定時間校正一次元素的位置，不過這種方法的損耗比較大，不建議使用。