# 位置

# Basic

document.compatMode 指定 document 使用何种模式渲染 Quirks mode 或者 Standards mode

BackCompat: 指定document使用quirks模式
CSS1Compat: 指定document使用almost standards或者standards模式

document.body

<body>
<div class="container">
  <div>This is document body</div>
</div>
</body>

document.documentElement

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0">
</head>
<body>
<div class="container">
  <div></div>
</div>
</body>
</html>

getBoundingClientRect(): 返回一个对象，其中包含了 left、right、top、bottom 四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离 clientWidth/clientHeight: 元素可视区域的宽高 不加 border scrollWidth/scrollHeight: 元素自身的高度(被卷去的宽高) 包含内部的滚动的高度 offsetWidth/offsetHeight: 元素自身的高度(元素正文宽高) 包括border

clientHeight 就是透过浏览器看内容的这个区域高度
offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于 clientHeight 时，scrollHeight 等于 clientHeight，而 offsetHeight 可以小于clientHeight

offsetHeight = 可视区域 clientHeight + 滚动条 + 边框。  scrollHeight 则是网页内容实际高度。

# 如何获取位置(How to get position)?

# 浏览器

# 获取浏览器窗口的大小

浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做 viewport(视口)。如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。

window.outerWidth
window.outerHeight

# 获取浏览器窗口的位置

//获取当前浏览器窗口距离屏幕左边的距离
function getWindowPositionLeft() {
  const leftPosition = typeof window.screenLeft === "number" ? window.screenLeft : window.screenX;

  console.log(`当前浏览器窗口距离屏幕左边${leftPosition}`);
  return leftPosition;
}

//获取当前浏览器窗口距离屏幕上边的距离
function getWindowPositionTop() {
  const topPosition = typeof window.screenLeft === "number" ? window.screenTop : window.screenY;

  console.log(`当前浏览器窗口距离屏幕上边${topPosition}`);
  return topPosition;
}

# 网页

# 获取当前网页大小-Part(不包含隐藏的可滚动部分)

window.innerWidth
window.innerHeight

或者

宽：
document.documentElement.clientWidth
document.documentElement.scrollWidth
document.documentElement.offsetWidth

高：
document.documentElement.clientHeight

# 获取当前网页大小-Total(包含隐藏的可滚动部分)

宽：
document.documentElement.clientWidth
document.documentElement.scrollWidth
document.documentElement.offsetWidth

高：
document.documentElement.scrollHeight
document.documentElement.offsetHeight

//如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的clientWidth和scrollWidth应该相等。
//但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值
function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

# 元素

# 获取元素的绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。

思路 1：首先，每个元素都有 offsetTop 和 offsetLeft 属性，表示该元素的左上角与父容器（offsetParent 对象）左上角距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标

function getAbsolutePosition1(element) {
  let actualLeft = element.offsetLeft;
  let actualTop = element.offsetTop;

  let current = element.offsetParent;

  while(current != null) {
    actualLeft += current.offsetLeft;
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }

  console.log(`该元素距离整个页面的左边的距离为${actualLeft}`);
  console.log(`该元素距离整个页面的上边的距离为${actualTop}`);
}

思路 2：元素的相对位置加上滚动的距离

function getAbsolutePosition2(element) {
  let actualLeft = element.getBoundingClientRect().left + document.documentElement.scrollLeft;
  let actualTop = element.getBoundingClientRect().top + document.documentElement.scrollTop;

  console.log(`该元素距离整个页面的左边的距离为${actualLeft}`);
  console.log(`该元素距离整个页面的上边的距离为${actualTop}`);
}

# 获取元素的相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是 document 对象的 scrollTop 属性；滚动条滚动的水平距离是 document 对象的 scrollLeft 属性。

思路 1：

function getRelativePosition1(element) {
  let actualLeft = element.offsetLeft;
  let actualTop = element.offsetTop;

  let current = element.offsetParent;
  let elementScrollLeft = 0;
  let elementScrollTop = 0;

  while(current != null) {
    actualLeft += current.offsetLeft;
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }

  if(document.compatMode === "BackCompat") {
    elementScrollLeft = document.body.scrollLeft;
    elementScrollTop = document.body.scrollTop;
  } else {
    elementScrollLeft = document.documentElement.scrollLeft;
    elementScrollTop = document.documentElement.scrollTop;
  }

  actualLeft = actualLeft - elementScrollLeft;
  actualTop = actualTop - elementScrollTop;


  console.log(`该元素距离当前可视区的左边的距离${actualLeft}`);
  console.log(`该元素距离当前可视区的上边的距离${actualTop}`);
}

思路 2：

function getRelativePosition2(element) {
  let actualLeft = element.getBoundingClientRect().left;
  let actualTop = element.getBoundingClientRect().top;

  console.log(`该元素距离当前可视区的左边的距离为${actualLeft}`);
  console.log(`该元素距离当前可视区的上边的距离为${actualTop}`);
}

# 代码

//当前视口的高度 const clientHeight = document.documentElement.clientHeight || window.innerHeight; //网页的高度 const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //已滚动的距离 const scrollTop = document.documentElement.scrollTop; console.log('scrollTop', scrollTop);

# 参考

https://segmentfault.com/a/1190000010619181 http://www.cnblogs.com/autismtune/p/5264589.html

← 移动端布局方案 Router路由 →