解析不同方式获取视口和元素尺寸、位置的攻略

解析不同方式获取视口和元素尺寸、位置的攻略

在前端开发中，获取视口（viewport）和元素的尺寸和位置是经常会遇到的需求。本文将对不同方式获取视口、元素尺寸和位置的方法进行详细解析，帮助开发者了解不同方法的特点和适用场景，以便根据实际需求选择最合适的方法。

视口页面或窗口的位置和宽高

获取视口宽高

下面方法是包括滚动条的宽高，不支持IE8

document.documentElement.clientWidth
document.documentElement.clientHeight

页面滚动位置

返回整个页面的滚动的位置，pageYOffset/pagepageYOffset（Firefox兼容性更好）

document.body.scrollTop
document.documentElement.scrollTop
window.pageYOffset

视口相对于页面左上角的位置

对于标准浏览器，viewport相对于左上角的绝对位置，可以使用window.pageXOffset和window.pageYOffset获取。

对于IE浏览器，pageXOffset和pageYOffset获取的不是viewport相对于左上角的绝对位置，而是相对于父框架的偏移量，因此使用window.pageXOffset和window.pageYOffset获取的不是viewport相对于页面左上角的绝对位置，而是相对于父框架的偏移量。

为了获取viewport相对于页面左上角的绝对位置，需要使用如下的方法。

function getViewportPosition() {
  var e = document.documentElement;
  return {
    left: e.scrollLeft,
    top: e.scrollTop
  };
}

元素相对于视口的位置

• clientRect

使用getBoundingClientRect方法可以获得元素相对于视口的绝对位置，返回一个DOMRect对象。

var rect = element.getBoundingClientRect();

• offsetTop, offsetLeft

offsetTop和offsetLeft可以获得元素相对于其父元素的位置。

var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;

• pageXOffset, pageYOffset

pageXOffset和pageYOffset可以获得元素相对于整个页面的位置。

var pageXOffset = element.pageXOffset;
var pageYOffset = element.pageYOffset;

元素的尺寸

• clientWidth, clientHeight

clientWidth和clientHeight可以获得元素的内边距尺寸（不包括边框和滚动条）。

var clientWidth = element.clientWidth;
var clientHeight = element.clientHeight;

• scrollWidth, scrollHeight

scrollWidth和scrollHeight可以获得元素的滚动内容的尺寸。

var scrollWidth = element.scrollWidth;
var scrollHeight = element.scrollHeight;

• offsetWidth, offsetHeight

offsetWidth和offsetHeight可以获得元素的边框尺寸（包括边框和滚动条）。

var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;

总结

以上是获取视口和元素尺寸和位置的方法。开发者可以根据实际需求选择最合适的方法。

方法		优点	缺点
document.documentElement.clientWidth/clientHeight	获取视口宽高，包括滚动条的宽高	简单易用	不支持IE8
window.pageYOffset/pageXOffset	返回整个页面的滚动的位置	简单易用	IE浏览器中获取的不是viewport相对于左上角的绝对位置，而是相对于父框架的偏移量
document.body.scrollTop/documentElement.scrollTop	返回整个页面的滚动的位置	简单易用	IE浏览器中获取的不是viewport相对于左上角的绝对位置，而是相对于父框架的偏移量
getViewportPosition()	获取viewport相对于页面左上角的绝对位置	兼容性好	代码稍复杂
element.getBoundingClientRect()	获得元素相对于视口的绝对位置	简单易用	不支持IE8
element.offsetTop/offsetLeft	获得元素相对于其父元素的位置	简单易用	不支持IE8
element.pageXOffset/pageYOffset	获得元素相对于整个页面的位置	简单易用	不支持IE8
element.clientWidth/clientHeight	获得元素的内边距尺寸（不包括边框和滚动条）	简单易用	不支持IE8
element.scrollWidth/scrollHeight	获得元素的滚动内容的尺寸	简单易用	不支持IE8
element.offsetWidth/offsetHeight	获得元素的边框尺寸（包括边框和滚动条）	简单易用	不支持IE8