js文档高度位置相关值获取

ps:前言-最近再研究上拉加载与下拉刷新,涉及到文档高、可视区高等。。

本人测试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);
===============测试总结==================
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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容