javascript 基础- 获取屏幕高度

是什么

在日常开发中，我们会写 回到顶部、滚动条加载数据 等常用功能，这时候，我们不得不提到用 js 获取页面高度的问题。

如获取当前元素到页面底部的距离， 如获取文档网页底部到可视区窗口距离等，我们需要了解以下 API

讲什么

1. 文档高度与宽度
2. 可视区域高度与宽度
3. 当前元素高度与宽度
4. 带滚动条：获取纵向滚动条高度
5. 带滚动条：获取横向滚动条长度
6. 获取元素到视口的距离
7. event 对象中的值
8. 常用公式
9. 实用案例
10. 总结

文档高度与宽度

即是 document 的高度/宽度, 它通常和滚动条相互关联判断操作

1. document.documentElement 获取文档元素。($(document).height())
2. 当没有滚动条时 scrollHeight 和 clientHeight 相同，事实上各种浏览器有不同的处理，通常兼容性写法是取这俩中最大者。

function getPageInfo() {
  return {
    width: Math.max(
      document.documentElement.scrollWidth,
      document.documentElement.clientWidth
    ),
    height: Math.max(
      document.documentElement.scrollHeight,
      document.documentElement.clientHeight
    ),
  };
}

可视区域高度与宽度

即是 当前可视区域的高度 和 宽度, 它通常和滚动条相互关联判断操作

1. document.documentElement 获取文档元素。($(window).height())
2. 可视区域高度与宽度 是 文档高度与宽度的子集
3. jq 写法 $(window).height(); $(window).width();

function getViewport() {
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  };
}

当前元素高度与宽度

即是当前元素的真实高度，与滚动条操作无关

1. $(ele).height() 获取元素的真实高度
2. $(ele).width() 获取元素的真实宽度
3. 当出现滚动条的时候， 我们可以使用 $(ele).offset().top 来获取当前元素距顶部的距离

function getEleTop(el) {
  let offsetTop = el.offsetTop;
  let current = el.offsetParent;
  while (current !== null) {
    offsetTop += current.offsetTop;
    current = current.offsetParent;
  }
  return offsetTop;
}

带滚动条：获取纵向滚动条高度

function getScrollTop() {
  let doc = document;
  return Math.max(doc.body.scrollTop, doc.documentElement.scrollTop);
}

带滚动条：获取横向滚动条长度

function getScrollLeft() {
  let doc = document;
  return Math.max(doc.body.scrollLeft, doc.documentElement.scrollLeft);
}

获取元素到视口的距离

使用 getBoundingClientRect 方法返回元素的大小及其相对于视口的位置。

如果是标准盒子模型，元素的尺寸等于 width/height + padding + border-width 的总和。如果 box-sizing: border-box，元素的的尺寸等于 width/height。

1. 方法返回的一组矩形的集合
2. left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。
3. width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

var rect = obj.getBoundingClientRect();

event 对象中的值

在绑定事件的时候，通常 js 会返回一个 event 对象，这个对象返回了当前元素的相关信息。

1. event.screenY 当前元素的屏幕-滚动距离，它包含可视区域未显示的部分（它最大）
2. event.pageY 当前元素的 clientY + ScrollY 距离（它第二大）
3. event.clientY 当前元素的可视区域-滚动距离，它只包含可视区域部分（它第三大）
4. event.offsetY 当前元素距离父元素的距离（它第四大）

常用公式

1. 文档底部与可视区窗口底部的距离 = 文档总高度(document) - 文档滚动高度(scroll) - 可视区窗口高度(view)
2. 当前元素与底部的距离 = 可视区窗口高度(view) + 文档滚动高度(scroll) - 当前元素与页面顶部距离(offset) - 当前元素高度 (ele.height)

实用案例

返回顶部

function goTop() {
  const goTop = document.querySelector(".goTop");
  const rootElement = document.documentElement;
  const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
  if (rootElement.scrollTop / scrollTotal > 0.8) {
    goTop.classList.add("showBtn");
  } else {
    goTop.classList.remove("showBtn");
  }
}

document.addEventListener("scroll", goTop);

滚动导航

window.addEventListener("scroll", goTop);
function goTop() {
  var nav = document.getElementById("item-nav");
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > 65) {
    nav.style.top = "20px";
  } else {
    nav.style.top = 80 - scrollTop + "px";
  }
}

上下滚动时判断元素在视口中出现

document.onscroll = () => {
  let dom = document.getElementById("box");
  let top = getElementTop(dom); // 元素距页面高度
  let scrollTop = getScrollTop(); // 获取滚动条高度
  let viewPortHeight = getViewport().height; // 获取视口宽高

  if (top > scrollTop && top <= scrollTop + viewPortHeight) {
    console.log("元素出现");
  }
};

document.onscroll = () => {
  let $dom = $("#box");
  let top = $dom.offset().top;
  let scrollTop = $(window).scrollTop();
  let viewPortHeight = $(window).height();

  if (top > scrollTop && top <= scrollTop + viewPort.height) {
    console.log("元素出现");
  }
};

总结

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth