是什么
在日常开发中，我们会写 回到顶部、滚动条加载数据 等常用功能，这时候，我们不得不提到用 js 获取页面高度的问题。
如获取当前元素到页面底部的距离， 如获取文档网页底部到可视区窗口距离等，我们需要了解以下 API
讲什么
- 文档高度与宽度
- 可视区域高度与宽度
- 当前元素高度与宽度
- 带滚动条：获取纵向滚动条高度
- 带滚动条：获取横向滚动条长度
- 获取元素到视口的距离
- event 对象中的值
- 常用公式
- 实用案例
- 总结
文档高度与宽度
即是 document 的高度/宽度, 它通常和滚动条相互关联判断操作
- document.documentElement 获取文档元素。($(document).height())
- 当没有滚动条时 scrollHeight 和 clientHeight 相同，事实上各种浏览器有不同的处理，通常兼容性写法是取这俩中最大者。
function getPageInfo() {
return {
width: Math.max(
document.documentElement.scrollWidth,
document.documentElement.clientWidth
),
height: Math.max(
document.documentElement.scrollHeight,
document.documentElement.clientHeight
),
};
}
可视区域高度与宽度
即是 当前可视区域的高度 和 宽度, 它通常和滚动条相互关联判断操作
- document.documentElement 获取文档元素。($(window).height())
- 可视区域高度与宽度 是 文档高度与宽度的子集
- jq 写法
$(window).height(); $(window).width();
function getViewport() {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
};
}
当前元素高度与宽度
即是当前元素的真实高度，与滚动条操作无关
- $(ele).height() 获取元素的真实高度
- $(ele).width() 获取元素的真实宽度
- 当出现滚动条的时候， 我们可以使用 $(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。
- 方法返回的一组矩形的集合
- left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。
- width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
var rect = obj.getBoundingClientRect();
event 对象中的值
在绑定事件的时候，通常 js 会返回一个 event 对象，这个对象返回了当前元素的相关信息。
- event.screenY 当前元素的屏幕-滚动距离，它包含可视区域未显示的部分（它最大）
- event.pageY 当前元素的 clientY + ScrollY 距离（它第二大）
- event.clientY 当前元素的可视区域-滚动距离，它只包含可视区域部分（它第三大）
- event.offsetY 当前元素距离父元素的距离（它第四大）
常用公式
- 文档底部与可视区窗口底部的距离 = 文档总高度(document) - 文档滚动高度(scroll) - 可视区窗口高度(view)
- 当前元素与底部的距离 = 可视区窗口高度(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
