js基礎--獲取瀏覽器當前頁面的滾動條高度的兼容寫法

歡迎訪問我的個人博客：http://www.xiaolongwu.cn

前言

在開發中，兼容性問題是最常見的，今天就來介紹一下關於獲取滾動條高度的兼容性寫法，寬度同理，我在這里就不一一解釋了

各瀏覽器的寫法

• IE6/7/8

document.documentElement.scrollTop

• IE9以上

window.pageYOffset或者document.documentElement.scrollTop

• Safari

window.pageYOffset 與document.body.scrollTop

• Firefox

window.pageYOffset 或者 document.documentElement.scrollTop

• Chrome

document.body.scrollTop

具體的寫法

通過上面列出的主流瀏覽器的兼容性，其實我們不難看出，其實只要我們判斷到document.body.scrollTop和document.documentElement.scrollTop就會包括上面所有的瀏覽器；故最終的寫法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);

如果需要監聽滾動條，那么就監聽onscroll事件即可；如

document.body.onscroll = function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);
}

我的github資源地址：https://github.com/js基礎--獲取瀏覽器當前頁面的滾動條高度的兼容寫法.md

我的個人博客地址：http://www.xiaolongwu.cn

我的博客園地址：http://www.cnblogs.com/wuxiaolong555

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[e-mail]