1.scroll
1.1 scrollHeight和scrollWidth
获取元素整个内容的高度和宽度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高。
整张网页的总高度可以从document.documentElement或document.body上读取。
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
1.2 scrollTop和scrollLeft
获取元素垂直和水平滚动条滚动的距离(被卷去的头部和左侧)
如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElement元素上读取。
document.documentElement.scrollLeft
document.documentElement.scrollTop
2.offset
2.1 offsetHeight和offsetWidth(只读)
获取盒子的高度宽度,包括内容区、内边距、边框(这里就是css设置的那些样式组合)
2.2 offsetLeft和offsetTop(只读)
当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,top是距离顶部的距离,left是最左边的距离) offsetLeft水平偏移量 offsetTop垂直偏移量。
3.client
3.1 clientHeight和clientWidth(不包含滚动条)
元素的可见高度,包括元素的内容区和内边距的高度 元素的可见宽度,包括元素的内容区和内边距的宽度.
document.documentElement的clientHeight属性,返回当前视口的高度(即浏览器窗口的高度),等同于window.innerHeight属性减去水平滚动条的高度(如果有的话)。document.body的高度则是网页的实际高度。一般来说,document.body.clientHeight大于document.documentElement.clientHeight.
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight
3.2 clientLeft和ClientTop
边框宽度和边框的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
margin: 0;
padding: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<div
style="
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
border: 10px solid black;
"
id="div1"
>
hendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnalhendvnca;SCMAsvclaMVAvaVS了擦MVLK澳门v了AMVnal
</div>
<script>
var div1 = document.getElementById("div1");
console.log(div1.scrollHeight); //231
console.log(div1.offsetHeight); //200
console.log(div1.clientHeight); //183
div1.addEventListener("scroll", function () {
console.log(div1.scrollTop);
console.log(div1.scrollLeft);
console.log(div1.clientTop);
console.log(div1.clientLeft);
console.log(div1.offsetTop);
console.log(div1.offsetLeft);
});
</script>
</body>
</html>