元素的位置是以像素来度量的, 有两个不同的点作为坐标系的原点:
文档的左上角
在其中显示文档的视口的左上角
在顶级窗口和标签页中, 视口只是实际显示文档内容的浏览器的一部分: 他不包括浏览器的 "外壳"(如菜单, 工具栏和标签页). 针对框架页中显示的文档, 视口是定义了框架页的 < iframe > 元素.
无论在何种情况下, 当讨论元素的位置时, 必须弄清楚所使用的坐标是文档坐标还是视口坐标 (或者是窗口坐标).
查询窗口的滚动条位置
先使用比较新的属性 scrollingElement:scrollingElement ( Document 的只读属性) 返回滚动文档的 Element 对象的引用. 在标准模式下, 这是文档的根元素, document.documentElement. 当在怪异模式下, scrollingElement 属性返回 html body 元素 (若不存在返回 null ).
- // 查询窗口的滚动条位置
- function getScroll(w){
- w = w || window;
- var d = w.document;
- var scrollingElement = d.scrollingElement;
- return {
- x: scrollingElement.scrollLeft,
- y: scrollingElement.scrollTop
- }
- }
或者是 window 对象的 pageXOffset 和 pageYOffset 属性 (IE8 及以下不兼容):
- // 查询窗口的滚动条位置
- function getScroll(w){
- w = w || window;
- return {
- x: w.pageXOffset,
- y: w.pageYOffset
- };
- }
但是我们有时也要考虑浏览器的兼容性:
- // 查询窗口的滚动条位置
- function getScrollOffsets(w){
- w = w || window;
- // 除了 IE8 及以下版本, 其他浏览器使用
- if(w.pageXOffset != null){
- return {
- x: w.pageXOffset,
- y: w.pageYOffset
- };
- }
- // 对标准模式下的 IE(或任何浏览器)
- var d = w.document;
- if(document.compatMode == "CSS1Compat"){
- return {
- x: d.documentElement.scrollLeft,
- y: d.documentElement.scrollTop
- };
- }
- // 怪异模式下的浏览器
- return {
- x: d.body.scrollLeft,
- y: d.body.scrollTop
- };
- }
查询窗口的视口尺寸
- // 查询窗口的视口尺寸
- function getViewportSize(w){
- w = w || window;
- // 除了 IE8 及以下版本, 其他浏览器使用
- if(w.innerWidth != null){
- return {
- w: w.innerWidth,
- h: w.innerHeight
- };
- }
- // 对标准模式下的 IE(或任何浏览器)
- var d = w.document;
- if(document.compatMode == "CSS1Compat"){
- return {
- w: d.documentElement.clientWidth,
- h: d.documentElement.clientHeight
- };
- }
- // 怪异模式下的浏览器
- return {
- w: d.body.clientWidth,
- h: d.body.clientHeight
- };
- }
不过 innerWidth/innerHeight 和 clientWidth/clientHeight 的返回结果是不同的, 先看一张图
从图中可以看出两者的差距就在于当有滚动条的时候, innerWidth/innerHeight 包括滚动条的宽度, 而 clientWidth/clientHeight 不包括滚动条的宽度.
来源: https://www.2cto.com/kf/201805/750086.html