JavaScript Scroll家族以及封裝

時間 2019-12-17

標籤 javascript scroll 家族以及封裝欄目 JavaScript 简体版

原文原文鏈接

JavaScript Scroll家族以及封裝

scrollTop & scrollLeft 別捲去的值,就是當滑動滾輪瀏覽網頁的時候,網頁隱藏在屏幕上方或左側的距離

得到scrollTop 或者 scrollLeft的值有三種方式
- 支持谷歌瀏覽器和沒有聲明<!DOCTYPE html>:document.body.scrollTop
- 支持火狐和其它瀏覽器: document.documentElement.scrollTop
- 支持ie9+ 和最新瀏覽器 : window.pageXOffset
兼容寫法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

封裝本身的scroll

function scroll() {
     // 獲取scrollTop  和  scrollLeft有三種方式
     // 1.ie9+ 以及其餘新的瀏覽器支持的 --> window.pageXOffset  window.pageYOffset
     // 2.谷歌瀏覽器和沒有聲明<!DOCTYPE html>的 --> document.body.scrollLeft  document.body.scrollTop
     // 3.火狐和其餘瀏覽器支持的 --> document.documentElement.offsetLeft  document.documentElement.offsetTop
     if(window.pageXOffset != null) { // ie9+ 以及其餘新瀏覽器
         return {left : window.pageXOffset, top : window.pageYOffset};
     } else if(document.compatMode == "CSS1Compat") { // 聲明瞭<!DOCTYPE html>
         return {left : document.documentElement.offsetLeft, top : document.documentElement.offsetTop};
     } else { // 剩下的怪異瀏覽器
         return {left : document.body.offsetLeft, top : document.body.offsetTop};
     }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。