網頁取得 body 捲動後的高度

JavaScript scrollTop 屬性可以設置和獲取指定元素的設置或返回指定元素內容垂直滾動的像素數。而 scrollLeft 屬性設置或返回元素內容水平滾動的像素數。指定符合網頁的文件型別宣告 <!DOCTYPE html> 正確取得網頁 document.body.scrollTop 滾動元素捲動後的高度，使用判斷方式以符合不同之 Chrome, Edge, Firefox, Safari, Opera 瀏覽器。

JavaScript 網頁捲動位置

設定網頁滑動到指定位置 Pixels、網頁滾動到特定位置，讀取當前網頁捲動位置。JavaScript scrollTop 屬性可以用來取得或設定元素的捲動高度，也就是元素頂端與可見區域頂端的距離。如果想要取得整個 body 的捲動高度，JavaScript 網頁捲動偵測可以使用 document.body.scrollTop 或 document.documentElement.scrollTop 依據瀏覽器的不同而有所差異，但目前比較沒有問題。可以用來製作網頁內容之畫面捲動相關的效果，例如回到頂端或是指定的導覽位置等。

function getScrollTop(){
  var bodyTop = 0;
  if (typeof window.pageYOffset != "undefined") {
    bodyTop = window.pageYOffset;

  } else if (typeof document.compatMode != "undefined"
             && document.compatMode != "BackCompat") {
    bodyTop = document.documentElement.scrollTop;

  } else if (typeof document.body != "undefined") {
    bodyTop = document.body.scrollTop;
  }
  /* 顯示出捲動後的高度值 */
  document.getElementById("jsScrollTop").innerHTML = bodyTop;
}

jQuery .scroll()

jQuery .scroll() 事件可用於滾動的元素和瀏覽器視窗物件 window。

只需將函數綁定到指定元素的 scroll 事件，當瀏覽者滾動指定的元素時則會觸發捲動 scroll 事件運行指定的 function 函數。

$(function () {
  $(window).scroll(function () {
    var scrollVal = $(this).scrollTop();
    $("span.qScrollTop").text(scrollVal);
  });
});

if(scrollVal > 500){
  /* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/
}

JavaScript WheelEvent 滾輪事件

WheelEvent 接口表示由於用戶移動滑鼠滾輪或類似輸入設備而發生的事件。用來創建 WheelEvent 對象。且接口繼承父接口 MouseEvent 滑鼠事件、UIEvent 表示簡單的用戶界面事件、Event 在 DOM 中出現事件的方法。

WheelEvent.deltaMode 表示單位的值、像素、單位為行、單位為頁。
主要取得 WheelEvent.deltaX 滾輪的橫向「水平」滾動量。WheelEvent.deltaY 滾輪的「垂直」縱向滾動量。

相關於 WheelEvent 滾輪事件 jquery-mousewheel 滑鼠滾輪插件、滑鼠滾輪，觸發的方法。依照滾輪反映的正負內容滾動方向，於多筆資料處理對應的資料列出。

判斷瀏覽器、過期的方法

Quirks mode 或者稱為 Compatibility Mode

Quirks mode 或者稱為 Compatibility Mode 是瀏覽器的渲染模式，用於向後兼容不符合標準的網頁。Quirks mode 的行為會根據不同的瀏覽器而有所差異，但通常會模仿舊版瀏覽器的特性來譯解。但也會帶來些不可預測的問題和安全風險。因此建議網頁開發者避免使用 Quirks mode 並且遵循標準的文檔類型和語法規範。document.compatMode = CSS1Compat 標準模式，IE 瀏覽器開啟相容模式。
documentMode 屬性返回瀏覽器渲染文檔的模式。IE 使用不同方式渲染頁面，基於 !DOCTYPE 或者某些存在的 HTML 元素。當前 documentMode 已經不重要了，隨即時間應該就不存在這參數了。

網頁取得 body 捲動後的高度

JavaScript 網頁捲動位置

jQuery .scroll()

相關於 window 物件的屬性

回傳瀏覽器於 window 視窗在螢幕的座標

JavaScript WheelEvent 滾輪事件

判斷瀏覽器、過期的方法