js文檔高度位置相關(guān)值獲取

ps:前言-最近再研究上拉加載與下拉刷新,涉及到文檔高、可視區(qū)高等。。

本人測試ie,FF,chrome用document.documentElement.clientHeight都能取得高度和jquery 中的$(window).height();一樣的值

文檔的高度
document.body.clientHeight||document.documentElement.clientHeight,
文檔滾動條位置
document.body.scrollTop||document.documentElement.scrollTop
但沒有定義W3C標準會有問題
var dd = document.body || document.documentElement;
var h1 = Math.max(dd.clientHeight,db.clientHeight);var h2 = Math.max(dd.scrollHeight,db.scrollHeight);var objH = Math.max(h1,h2);
===============測試總結(jié)==================
has w3c

chrome:

  1. document文檔高度
($(document).height())==document.body.clientHeight;
document.documentElement.scrollHeight==document.body.scrollHeight
  1. 可視高度
($(window).height())==document.documentElement.clientHeight;
scrollTop==document.body.scrollTop

firefox:

  1. document文檔高度==document.body.clientHeight;
document.documentElement.scrollHeight==document.body.scrollHeight
  1. 可視高度==document.documentElement.clientHeight;
scrollTop==document.documentElement.scrollTop;

ie:

  1. document文檔高度==document.body.clientHeight;
document.documentElement.scrollHeight==document.body.scrollHeight
  1. 可視高度==document.documentElement.clientHeight;
scrollTop==document.documentElement.scrollTop;

no w3c

chrome:

  1. document文檔高度($(document).height())!=document.body.clientHeight;
document文檔高度==document.documentElement.clientHeight;
document.documentElement.scrollHeight==document.body.scrollHeight
  1. 可視高度($(window).height())==document.documentElement.clientHeight;等于文檔高度
可視高度為document.body.clientHeight;
scrollTop==document.body.scrollTop

firefox:
document文檔高度($(document).height())!=document.body.clientHeight;

document文檔高度==document.documentElement.clientHeight;
document.documentElement.scrollHeight==document.body.scrollHeight
可視高度($(window).height())==document.documentElement.clientHeight;等于文檔高度
可視高度為document.body.clientHeight;
scrollTop==document.body.scrollTop

ie

document文檔高度==document.body.scrollHeight;
可視高度==document.body.clientHeight;
document.documentElement.scrollHeight
document.documentElement.clientHeight==0
scrollTop==document.body.scrollTop

has w3c兼容

文檔高(推薦scrollHeight,document.body.clientHeight || document.documentElement.clientHeight;)
--------------------------------------兼容ie firefox chrome--------------------------------
****文檔高

document.documentElement.scrollHeight||document.body.scrollHeight;(注意)

可視高

document.documentElement.clientHeight || document.body.clientHeight
scrollTop==document.documentElement.scrollTop||document.body.scrollTop;```
-------------------------------------------------------------------------------------------
####no w3c兼容

文檔高document.documentElement.clientHeight || document.body.scrollHeight;
可視高document.body.clientHeight
scrollTop==document.documentElement.scrollTop||document.body.scrollTop;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容