jQuery窗口、文档、网页各种高度的精确理解


Posted in Javascript onJuly 02, 2014

$(document).height():整个网页的高度
$(window).height():浏览器可视窗口的高度
$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。

不建议使用$("html").height()、$("body").height()这样的高度。

原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;
$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。
$(window).height()值有问题,返回的不是浏览器窗口的高度?

Javascript 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
vue构建单页面应用实战
Apr 10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
基于vue实现分页效果
Nov 06 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 #Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 #Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 #Javascript
js面向对象编程之如何实现方法重载
Jul 02 #Javascript
jquery.validate.js插件使用经验记录
Jul 02 #Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 #Javascript
js获取IP地址的方法小结
Jul 01 #Javascript
You might like
linux实现php定时执行cron任务详解
2013/12/24 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python编程之序列操作实例详解
2017/07/22 Python
python flask实现分页的示例代码
2018/08/02 Python
python配置grpc环境
2019/01/01 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python实现126邮箱发送邮件
2020/05/20 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
python实现计算图形面积
2021/02/22 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
亲戚结婚的请假条
2014/02/11 职场文书
《金子》教学反思
2014/04/13 职场文书
大学生社会实践评语
2014/04/25 职场文书
管理失职检讨书
2015/05/05 职场文书
道歉情书大全
2015/05/12 职场文书