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