摘要：而和則表示該容器中頁面視圖區(qū)的大小減去邊框?qū)挾?。語法實(shí)際上，返回的值是一個(gè)雙精度浮點(diǎn)值，指示文檔當(dāng)前從原點(diǎn)垂直滾動(dòng)的像素?cái)?shù)，其中正值表示向上滾動(dòng)。除此之外，舊版本不支持這些屬性，必須通過檢查其他非標(biāo)準(zhǔn)屬性來解決。

博客地址：https://guitong.github.io/blo...

上一節(jié)中，我們分析了 jQuery lazyload 源碼，其中有這么一段：

  /* 在jQuery命名空間內(nèi)定義了便捷的方法，判斷圖片是否在容器視口范圍內(nèi) */
  $.belowthefold = function (element, settings) {...}
  $.rightoffold = function (element, settings) {...}
  $.abovethetop = function (element, settings) {...}
  $.leftofbegin = function (element, settings) {...}
  $.inviewport = function (element, settings) {...}

說實(shí)話，這才是我最感興趣的內(nèi)容。那么實(shí)現(xiàn)一個(gè)lazyload，應(yīng)該怎樣判斷圖片與瀏覽器可見區(qū)域的相對(duì)位置呢，現(xiàn)在以$.belowthefold方法為例，看一下其實(shí)現(xiàn)方式：

$.belowthefold = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }

        return fold <= $(element).offset().top - settings.threshold;
    };

首先這段代碼的目的是判斷當(dāng)前元素（圖片）是否在瀏覽器視口的下方。

變量fold我理解為當(dāng)前文檔已“折疊”的高度，也就是當(dāng)前瀏覽器視口的最底部至文檔最頂部的距離。與fold變量值相比較的值是$(element).offset().top - settings.threshold，那么這個(gè)值代表什么呢？

seetings.threshold是我們上節(jié)提到過的臨界值，默認(rèn)為0，這里我們可以先將其忽略。jQuery對(duì)象的offset()方法定義如下：

Get the current coordinates of the first element in the set of matched elements, relative to the documents.

也就是當(dāng)前元素相對(duì)于文檔的坐標(biāo)。它的top值即為元素到文檔頂部的距離。

那么也就不難理解，如果這個(gè)值大于等于文檔已“折疊”的高度值，它的位置就在瀏覽器視口的下方。

然而這些jQuery方法也是封裝過的方法，我們還需要探究它們的實(shí)現(xiàn)方式。

以下內(nèi)容參考自大紅本 — 《JavaScript高級(jí)程序設(shè)計(jì)》，第三版，第八章

跨瀏覽器確定一個(gè)窗口的大小不是一件簡(jiǎn)單的事。IE9+、Firefox、Safari、Opera和Chrome均為此提供了4個(gè)屬性：innerWidth 、innerHeight、outerWidth、outerHeight。在IE9+、Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸（無論是最外層的window對(duì)象還是從某個(gè)框架訪問）。在Opera中，這兩個(gè)屬性的值表示頁面視圖容器（這里所謂的“頁面視圖容器”指的是Opera中單個(gè)標(biāo)簽頁對(duì)應(yīng)的瀏覽器窗口）的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區(qū)的大小（減去邊框?qū)挾龋?。在Chrome中，outerWIdth和outerHeight與innerWidth、innerHeight返回相同的值，即視口（viewport）大小而非瀏覽器窗口大小。

IE8及更早版本沒有提供取得當(dāng)前瀏覽器窗口尺寸的屬性；不過，它通過DOM提供了頁面可見區(qū)域的相關(guān)信息。

在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標(biāo)準(zhǔn)模式下才有效；如果是混雜模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同信息。而對(duì)于混在模式下的Chrome，則無論通過document.documentElement還是document.body中的clientWidth和clientHeight屬性，都可以取得取得視口的大小。

（跑題了？？ ）

雖然最終無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小，如下所示：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
          pageWidth = document.documentElement.clientWidth;
          pageHeight = document.documentElement.clientHeight;
    } else {
          pageWidth = document.body.clientWidth;
          pageHeight = document.body.clientHeight;
    }
}

這段代碼很好理解，值得注意的是document.compatMode這個(gè)屬性。該值表明當(dāng)前文檔的渲染模式為“混雜模式”還是“標(biāo)準(zhǔn)模式”。當(dāng)值為"CSS1Compat"代表標(biāo)準(zhǔn)規(guī)范模式；當(dāng)值為"BackCompat"代表混雜模式。

這里以垂直方向?yàn)槔?/p>

先來看一個(gè)stackoverflow上的回答，翻譯如下：

獲取滾動(dòng)距離的標(biāo)準(zhǔn)方法為window.scrollY。Chrome、Firefox、Opera、Safari及IE Edge（或更高版本）均支持此方法。如果您僅需要支持這些瀏覽器，使用這個(gè)屬性即可。
IE >= 9 支持一個(gè)類似的屬性window.pageYOffset,為了保證兼容性，在現(xiàn)代瀏覽器中會(huì)返回與window.scrollY相同的值，盡管它可能在某些時(shí)候被棄用。
使用document.documentElement.scrollTop或document.body.scrollTop的問題是，它們并不是總是都被定義了滾動(dòng)。例如，Chrome和Safari將滾動(dòng)定義在元素，而Firefox則定義在了document.documentElement返回的元素上。這不是標(biāo)準(zhǔn)化的，并且在未來版本的瀏覽器中可能會(huì)發(fā)生變化。然而，如果scrollY和pageYOffset不存在，則這是獲取滾動(dòng)位置的唯一方法。

遂總結(jié)如下：
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

經(jīng)過測(cè)試，這個(gè)方法是可行的。不過，正如文中所說，果然在未來版本的瀏覽器中發(fā)生了變化。在最新的Chrome、Safari、Firefox中測(cè)試發(fā)現(xiàn)，Chrome與Firefox表現(xiàn)相同，document.documentElement.scrollTop返回滾動(dòng)值，而document.body.scrollTop返回0，Safari則與它們相反。

再來看一下MDN上對(duì)window.scrollY的解釋。

window接口的只讀屬性值scrollY返回文檔當(dāng)前垂直滾動(dòng)距離的像素值。這個(gè)值在現(xiàn)在瀏覽器中是亞像素精準(zhǔn)的，這意味著它不一定是一個(gè)整數(shù)。您可以從scrollY屬性獲取文檔水平滾動(dòng)的像素值。
# 語法
var y = window.scrollY
實(shí)際上，返回的值是一個(gè)雙精度浮點(diǎn)值，指示文檔當(dāng)前從原點(diǎn)垂直滾動(dòng)的像素?cái)?shù)，其中正值表示向上滾動(dòng)。如果文檔在子像素精準(zhǔn)的設(shè)備上呈現(xiàn)，則返回的值也是子像素精準(zhǔn)的，并且可能包含一個(gè)小數(shù)分量。如果文檔沒有向上或向下滾動(dòng)，則滾動(dòng)值是 0 。
如果你需要一個(gè)整型值，可以使用Math.round()方法
用更技術(shù)的話說，scrollY返回當(dāng)前視口頂邊的Y坐標(biāo)，如果沒有視口，則返回 0 。
# 示例
// make sure and go down to the second page
if (window.scrollY) {
  window.scroll(0, 0); // 重置滾動(dòng)條位置
}

window.scrollByPages(1);
(這個(gè)示例 出現(xiàn)在這里感覺怪怪的)
# 注意事項(xiàng)
使用此屬性來檢查使用相對(duì)滾動(dòng)方法時(shí)（如；scrollBy()、scrollByLines()、scrollByPages()）文檔是否尚未滾動(dòng)。
pageYOffset屬性是scrollY屬性的別名：
window.pageYOffset == window.scrollY // always true
考慮到跨瀏覽器兼容性，使用window.pageYOffset替代window.scrollY。除此之外，舊版本 IE（< 9）不支持這些屬性，必須通過檢查其他非標(biāo)準(zhǔn)屬性來解決。完全兼容的的例子如下：
var supportPageOffset = window.pageXOffset !== undefied;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var scrollX = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.document.scrollTop : document.body.scrollTop;
# 規(guī)范
CSS Object Model (CSSOM) View ModuleThe definition of "window.scrollY" in that specification.

==================== 太平洋分割線=======================

那么可以總結(jié)一下了。

要獲得頁面當(dāng)前的滾動(dòng)值，window.scrollY是基于標(biāo)準(zhǔn)的方法。然而考慮到跨瀏覽器兼容性，應(yīng)該使用window.pageYOffset，該屬性是window.scrollY的別名，被絕大多數(shù)現(xiàn)代瀏覽器所支持。對(duì)于低版本IE瀏覽器（< 9），可以判斷渲染模式（標(biāo)準(zhǔn)or混雜）來選擇使用document.documentElement.scrollTop/Left或document.body.scrollTop/Left方法。

推薦：

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var scrollX = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

發(fā)現(xiàn)跑題了，不是要看一下jQuery方法的源碼嗎？？？不過應(yīng)該大同小異。

明白了上面兩個(gè)重要的方法，實(shí)現(xiàn)一個(gè)兼容性良好lazyload就變得輕而易舉。