滚动距离、视口尺寸、偏移尺寸

滚动距离

pageXoffset/pageYoffset

:::info 获取页面滚动的距离
📌 这是常规的方式，但是IE8及以下版本浏览器不支持！ :::

window.pageXoffset
window.pageYoffset

scrollLeft/scrollTop

:::info 获取页面滚动的距离，该属性有两种方式访问分别是document.body和document.documentElement
document.documentElement.scrollLeft在IE8「标准模式」下支持
document.body.scrollLeft在IE8「怪异模式」下支持 :::

document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.scrollLeft
document.body.scrollTop

以下是兼容模式的写法🌴 ：

function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      left: window.pageXOffset,
      top: window.pageYOffset,
    };
  } else {
    // 兼容IE8
    return {
      left: document.body.scrollLeft || document.documentElement.scrollLeft,
      top: document.body.scrollTop || document.documentElement.scrollTop,
    };
  }
}
console.log(getScrollOffset());

操作滚动条

操作滚动条的方式有三种：window.scroll(x, y);、window.scrollTo(x, y);和window.scrollBy(x, y);
**X**、**Y**这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。
window.scrollBy(x, y);该方法的距离是累加的，每次滚动会在已滚动的距离上加上需要设置的滚动距离

window.scroll(100, 100);
window.scrollTo(100, 100);
window.scrollBy(100, 100);

这几个方法也都接收一个ScrollToOptions字典，除了提供偏移值，还可以通过behavior属性告诉浏览器是否平滑滚动。

// 正常滚动 
window.scrollTo({
  left: 100,
  top: 100,
  behavior: 'auto' 
});
// 平滑滚动 
window.scrollTo({
  left: 100,
  top: 100,
  behavior: 'smooth' 
});

文档尺寸

scrollHeight/scrollWidth

:::info 该属性获取文档全部全部的高度/宽度
同样也要兼容IE8「标准模式」和「怪异模式」 :::

console.log(document.documentElement.scrollWidth || document.body.scrollWidth);

可视窗口尺寸

innerHeight/innerWidth

:::info 获取客户端的视口尺寸（红色表示浏览器）
📌 这是常规的方式，但是IE8及以下版本浏览器不支持！ :::

window.innerHeight
window.innerWidth

类似的window对象还有outerWidth/outerHeight，这一对属性计算的范围比innerHeight/innerWidth多计算了侧边栏、工具栏等宽度/高度。

clientWidth/clientHeight

:::info 获取客户端的视口尺寸，该属性有两种方式访问分别是document.body和document.documentElement
document.documentElement.clientHeight在IE8「标准模式」下支持
document.body.clientHeight在IE8「怪异模式」下支持 :::

document.documentELement.clientWidth
document.documentELement.clientHeight
document.body.clientWidth
document.body.clientHeight

以下是兼容模式的写法🌴 ：

function getViewPortSize() {
  if (window.innerWidth) {
    return {
      width: window.innerWidth,
      heigth: window.innerHeight,
    };
  } else {
    return {
      width: document.body.clientWidth || document.documentElement.clientWidth,
      height: document.body.clientHeight || document.documentElement.clientHeight,
    }
  }
}
console.log(getViewPortSize())

偏移尺寸

offsetLeft/offsetTop

:::info 获取元素距离有「定位」父级元素或者body的距离。
注意该属性只要找到有「定位」父级元素就会返回距离，如果没有「定位」父级元素则会一直找到body :::

var box = document.getElementsByClassName("box")[0];
box.offsetTop
box.offsetLeft

获取定位的父级 offsetParent

:::info 获取元素带有「定位」的父级元素，如果找不到则一直寻找到body返回 :::

var box = document.getElementsByClassName("box")[0];
box.offsetParent

🌴 封装方法，不管有没有父级定位元素，都要找到距离body的距离：

function getElemDocPostion(el) {
  var parent = el.offsetParent;
  var offsetLeft = el.offsetLeft;
  var offsetTop = el.offsetTop;
  while (parent) {
    offsetLeft += parent.offsetLeft;
    offsetTop += parent.offsetTop;
    parent = parent.offsetParent;
  }
  return {
    left: offsetLeft,
    top: offsetTop,
  };
}
console.log(getElemDocPostion(box))