|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
一圖理解$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系
作者:admin 時間:2022-4-27 6:14:24 瀏覽:滾動條滾動高度$(this).scrollTop()、窗口高度$(window).height()、文檔高度$(document).height()，在進行JS編程用到它們的時候，可能還不是完全了解它們的含義，導(dǎo)致在判斷它們的關(guān)系時不能完全正確。
一圖讀懂三者關(guān)系
本文將用一圖，便可以讓你完全理解$(this).scrollTop()、$(window).height()與$(document).height()的含義，以及它們之間的關(guān)系。
$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系
解釋如下：
1、$(this).scrollTop() 是表示文檔的滾動高度，切勿不要認為是滾動條在窗口的位置高度。
2、$(window).height() 是表示瀏覽器窗口的高度，即是文檔可見部分的高度。把瀏覽器窗口手動的上下縮放拖動，這個值是會變化的。切勿不要認為是顯示屏的高度。
3、$(document).height() 是表示文檔的高度，包含顯示在窗口的可見部分，和沒有在窗口顯示的那些部分。這個值是固定的，不會隨滾動條上下滾動而變化，但它可能會隨瀏覽器窗口寬度不同而不同。
值得注意的是，HTML代碼第一行必須是<!DOCTYPE html>，而不能是<!DOCTYPE>。
原因可看此文<!DOCTYPE> 與 <!DOCTYPE html> 導(dǎo)致JS執(zhí)行出現(xiàn)問題。
三者關(guān)系的實際應(yīng)用
利用三者關(guān)系，我們可以在實際應(yīng)用中處理一些事情，比如我們可以利用它們的關(guān)系來判斷滾動條是否到達頂部、底部，還有網(wǎng)站常見的顯示效果：欄目、導(dǎo)航條顯示/隱藏的觸發(fā)事件。
實例代碼：
window.addEventListener("scroll", function(event)
{
event = event || window.event;
var scrollTop = $(this).scrollTop(); //滾動高度
console.log("$(this).scrollTop()=" + $(this).scrollTop());
var documentHeight = $(document).height(); //文檔高度
console.log("$(document).height()=" + $(document).height());
var windowHeight = $(window).height(); //窗口高度
console.log("$(window).height()=" + $(window).height());
if (scrollTop + windowHeight == documentHeight)
{
document.getElementById("tip").style.display = "none";
}
else
{
document.getElementById("tip").style.display = "block";
}
});實例介紹：
當滾動條到達文檔底部時，導(dǎo)航條消失。
判斷條件：
當 滾動高度+窗口高度=文檔高度 的時候，就表示滾動條已經(jīng)到達文檔底部了。
總結(jié)
本文通過一圖講解和實例的詳細介紹，你應(yīng)該已經(jīng)了解 $(this).scrollTop()、$(window).height()與$(document).height()的含義，以及它們之間的關(guān)系。
您可能對以下文章也感興趣
標簽: 滾動條
- 站長推薦
