您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

jQuery $(window) vs $(‘body,html’) 滾動高度獲取差異詳解

編輯：程式設計綜合問答

核心區別

選擇器	對象本質	scrollTop含義	適用場景
`$(window)`	Window對象（BOM）	視口相對文檔頂部滾動距離（`pageYOffset`）	監聽窗口滾動、懸浮導航、懶加載觸發
`$('body,html')`	Document根元素（DOM）	文檔流滾動距離，受DOCTYPE影響	頁面內錨點跳轉、平滑滾動動畫`animate({scrollTop})`

DOCTYPE導致的差異

Standards Mode (<!DOCTYPE html>)：html元素是滾動容器，body.scrollTop === 0恒成立。
Quirks Mode (無DOCTYPE)：body是滾動容器，html.scrollTop === 0。

因此$('body,html')雙選擇器兼容兩種模式，動畫時同時設置兩者確保生效。

jQuery源碼邏輯（簡化）

// jQuery offset 模塊相關邏輯
function getScrollTop(elem) {
    var win = getWindow(elem); // 判斷是否為window
    return win ? 
        ('pageYOffset' in win) ? win.pageYOffset : // 現代瀏覽器
        (document.documentElement.scrollTop || document.body.scrollTop) : // 兼容舊IE
        elem.scrollTop; // 普通元素
}

最佳實踐

獲取頁面滾動位置：$(window).scrollTop()（推薦，語義清晰）。
頁面平滑滾動到指定位置：$('html, body').animate({scrollTop: targetOffset})。
元素可視區判斷：elem.getBoundingClientRect().top < window.innerHeight（無需scrollTop）。

避坑指南

不要對$(window)調用.animate({scrollTop}) —— Window對象無scrollTop屬性設置器，動畫無效。
移動端window.scrollTop可能不準確（視口縮放），優先用document.scrollingElement.scrollTop（現代標準）。