捲軸位置判斷

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

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 則表示已捲動至最頂部。


沒有留言: