捲軸位置判斷

當捲動網頁的時候，在某些情形下必須偵測是否使用者已捲動至畫面的底部或是頂部，考慮以下的圖片配置：

TOP !!

圖片來源：蔡博宇（fufu）

拉動捲軸到底部的時候，會顯示 BOTTOM ，拉到頂部的時候，會顯示 TOP 。配置以下的頁面內容：

<div id="msg" ></div>

<div id="imgcontainer" >

    <img src="xxx.jpg"  />

</div> 

將圖片配置於 div 標籤中，並將其 id 設定 imgcontainer ，撰寫以下的程式碼：

<script>

    var imgc = document.getElementById('imgcontainer');

    imgc.addEventListener('scroll', function () {

        var sh = this.scrollHeight;

        var al = this.scrollTop + this.offsetHeight;

        if (al >= sh)

            document.getElementById('msg').innerText = 'BOTTOM !!';

        else

            document.getElementById('msg').innerText = '請繼續捲動　!!';

        if (this.scrollTop == 0)

            document.getElementById('msg').innerText = 'TOP !!';

    }, false);

</script>

其中判斷捲動的位置，並與畫面上可捲動的高度作比較，並輸出相關的說明訊息。如果 scrollTop 等於 0 則表示已捲動至最頂部。