當捲動網頁的時候,在某些情形下必須偵測是否使用者已捲動至畫面的底部或是頂部,考慮以下的圖片配置:
圖片來源:蔡博宇(fufu)
拉動捲軸到底部的時候,會顯示 BOTTOM ,拉到頂部的時候,會顯示 TOP 。配置以下的頁面內容:
將圖片配置於 div 標籤中,並將其 id 設定 imgcontainer ,撰寫以下的程式碼:
其中判斷捲動的位置,並與畫面上可捲動的高度作比較,並輸出相關的說明訊息。如果 scrollTop 等於 0 則表示已捲動至最頂部。
TOP !!
拉動捲軸到底部的時候,會顯示 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 則表示已捲動至最頂部。
沒有留言:
張貼留言