window窗口的各种宽高
一 常用的宽高属性
在日常开发的时候，我们常常需要用到这几个高度信息。浏览器的视口高度和宽度，浏览器的卷动高度，正文内容的总高度等等信息，我在下图中列出了在工作中最常用的几个宽度和高度信息。并在本篇文章中对各种常见宽高进行说明。
各种常见的高度：
二 各类宽高说明
2.1 window.innerHeight/window.innerWidth
window下的宽高属性最常见的就是window.innerHeight/window.innerWidth了。这个属性表示的是浏览器正文可见区域的高度和宽度。window.innerHeight包括水平滚动条的部分（如果存在的话，在通常情况下 window.innerHeight == document.body.clientHeight)
2.2 window.outerHeight/window.outerWidth
window.outerHeight和window.outerWidth表示的是浏览器可见区域（正文加上其他的一些乱七八糟的高度和宽度，我自己的理解就是你能一眼看完的所有浏览器区域）
2.3 document.body.scrollHeight/document.body.scrollWidth
document.body.scrollHeight/document.body.scrollWidth表示的是浏览器所有正文部分的高度／宽度（即你一眼看不完的区域的高度和宽度也算在里面）
2.4 document.body.scrollTop/document.body.scrollLeft
这两个高度表示的是水平和垂直滚动条滚动的距离。通常情况下
document.body.scrollTop + window.innerHeight(document.body.clientHeight) = document.body.scrollHeight
document.body.scrollLeft + window.innerWidth(document.body.clientWidth) = document.body.scrollWidth
所有，下列语句可以判断一个滚动容器是否滚动容器底部
element.scrollHeight - element.scrollTop == element.clientHeight
三 各种经验和坑
3.1 document.body.scrollTop值总是0
页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。
页面没有DTD，即没指定DOCTYPE时，使用document.body。
IE和Firefox都是如此。
而我的页面加了<!DOCTYPE html>，所以得使用document.documentElement.scrollTop。
参考资料&内容来源：
https://segmentfault.com/a/1190000009445930
https://blog.csdn.net/jiabin_xu/article/details/80537089
最新文章
- Java中Set Map List 的区别
- hdu5715 XOR 游戏 [2016百度之星复赛D题]
- 我如何调优SQL Server查询
- Selenium_模拟淘宝登录Demo
- 关于spring-servlet.xml cannot be opened because it does not exist的解决
- 什么是边界扫描(boundary scan)?
- 《The Google File System》论文阅读笔记——GFS设计原理
- 解决方案：Error:Execution failed for task ':app:compileDebugAidl'. > aidl is missing
- 项目源码--Android3D影音播放器源码
- js函数文件排序化
- 日志收集框架 Exceptionless
- graph driver-device mapper-04libdevmapper基本操作
- 免费的编程中文书籍索引 from github
- impala系列: 同步Hive元数据和收集统计信息
- 集合-HashMap
- 1、Sql-oracle-日期问题
- 正则表达式--C#正则表达式的符号及例子
- tensorflow模型量化
- Windows系统重装工具 WinToHDD Enterprise v2.8 企业破解版
- Webpack 常用命令总结以及常用打包压缩方法