视口
- 定义：
视口指实际显示内容的可见区域。
视口的分类（两类）
1.窗口视口：窗口视口就是浏览器窗口中实际显示文档内容的区域。
不包含：1.浏览器的“外框”,如菜单栏、工具栏和标签栏，但是包含滚动条。-
2.元素视口：对于元素而言，“视口”指一个元素实际显示元素内容的区域，即：内容区+padding区域。
如果元素内容发生溢出产生滚动条的情况下，
视口不包含滚动条。
dom-dimensions.png
查询视口尺寸（视口、文档、文档滚动的尺寸）
- window.innerinnerHeight(一呢害子)
- 定义：属性是一个只读属性，用于查询窗口视口的高度(含滚动条)。
- 语法：
window.innerHeight
- 返回值:
返回一个不带单位的像素值，表示窗口的视口(内部)高度，包括水平滚动条的高度. - 示例：
document.onclick = function(){
console.log(window.innerHeight);//385
document.body.style.width = '2000px'//设置水平滚动条
console.log(window.innerHeight);//385
}
- window.innerWidth (一呢位子)
- 定义：
属性是一个只读属性，用于查询窗口视口的高度(含滚动条) - 语法：
window.innerWidth
- 返回值：
返回一个不带单位的像素值，表示窗口的视口(内部)宽度，包括垂直滚动条的高度。 - 示例：
document.onclick = function(){
console.log(window.innerWidth);//450
document.body.style.height = '2000px'//设置垂直滚动条
console.log(window.innerWidth);//450
}
当我们把根元素.clientHeight应用在<html>根元素上的时候，它查询的是浏览器窗口的视口高度。
当我们把根元素.clientWidth应用在<html>根元素上的时候，它查询的是浏览器窗口视口宽度。
根元素.clientHeight
定义:
根元素.clientHeight用于用于查询窗口视口的高度(不含滚动条)。
- 语法：
document.documentElement.clientHeight//标准模式
document.body.clientHeight//怪异模式
- 返回值:
返回一个不带单位的像素值，表示窗口的视口(内部)宽度，不包括垂直滚动条的高度。 - 示例：
console.log(window.innerHeight);//返回385
console.log(document.documentElement.clientHeight);//返回385
document.body.style.width = '2000px'
document.body.style.height = '2000px'
console.log(window.innerHeight);//返回385
console.log(document.documentElement.clientHeight);//返回385
根元素.clientWidth
定义:
用于用于查询窗口视口的宽度(不含滚动条)。
- 语法：
document.documentElement.clientWidth//标准模式
document.body.clientWidth//怪异模式
- 返回值:
返回一个不带单位的像素值，表示窗口的视口(内部)宽度，不包括垂直滚动条的高度 - 示例：
console.log(window.innerWidth);//返回450
console.log(document.documentElement.clientWidth);//返回450
document.body.style.width = '2000px'
document.body.style.height = '2000px'
console.log(window.innerWidth);//返回450
console.log(document.documentElement.clientWidth);//返回450
根元素.offsetWidth
- 定义：用于查询文档的宽度。只读属性。
注意：注：文档的整体大小与<html>元素的大小相同，所以要获得文档的宽度，可以在根元素document.docmentElement上查询。 - 语法：
document.documentElement.offsetWidth //标准模式
document.body.offsetWidth //怪异模式
- 返回值:
返回一个整数，表示文档的像素宽度。 - 示例：
document.documentElement.offsetWidth //
document.body.offsetWidth //
根元素.offsetHeight
- 定义：用于查询文档的高度。只读属性。
注：文档的整体大小与<html>元素的大小相同，所以要获得文档的高度，可以在根元素document.docmentElement上查询。 - 语法：
document.documentElement.offsetHeight //标准模式
document.body.offsetHeight //怪异模式
- 返回值:
返回一个整数，表示文档的像素高度。 - 示例：
document.documentElement.offsetHeight //
document.body.offsetHeight //
window.scrollY
- 定义：属性是一个只读属性，用于查询文档垂直滚动距离。
- 语法：
window.scrollY
window.pageYOffset //window.scrollY的别名属性
- 返回值:
返回一个数值，表示文档垂直滚动的像素距离。 - 示例：
body{
height:200vh;
}
<script>
document.onclick = function(){
console.log(window.scrollY)
}
</script>
window.scrollX
- 定义：属性是一个只读属性，用于查询文档水平滚动距离。
- 语法：
window.scrollX
window.pageXOffset //window.scrollY的别名属性
- 返回值:
返回一个数值，表示文档水平滚动的像素距离。 - 示例：
body{
width:200vh;
}
<script>
document.onclick = function(){
console.log(window.scrollX)
}
</script>
根元素.scrollTop
- 定义：属性用于查询或设置元素内容垂直滚动的像素距离。
- 语法：
document.documentElement.scrollTop //查询文档的垂直滚动距离
document.documentElement.scrollTop = 100 //设置文档的垂直滚动距离为100px
- 返回值:
返回任意数值，表示文档垂直滚动的像素距离。 - 示例：
body{
height:200vh;
}
<script>
document.onclick = function(){
console.log(document.documentElement.scrollTop);
document.documentElement.scrollTop += 50 //每次垂直滚动50像素
}
</script>
根元素.scrollLeft
- 定义： 属性用于查询或设置元素内容水平滚动的像素距离。
- 语法：
document.documentElement.scrollLeft //查询文档的水平滚动距离
document.documentElement.scrollLeft = 100 //设置文档的水平滚动距离为100px
- 返回值:
返回任意数值，表示文档水平滚动的像素距离 - 示例：
body{
width:200vh;
}
<script>
document.onclick = function(){
console.log(document.documentElement.scrollLeft);
document.documentElement.scrollLeft += 50 //每次水平滚动50像素
}
</script>
元素.scrollTop
- 定义：获取文档滚动距离
设置文档滚动尺寸
window.scrollTo()
- 定义：用于查询滚动条的滚动距离。
- 语法：
- 返回值：
- 示例：
实现平滑效果
html{
scroll-behavior:smooth;
}
| 尺寸对照表 | 如下 | ||
|---|---|---|---|
| 元素尺寸 （元素:高/宽）： | 不含margin（外边距）的边框盒尺寸 | 元素.offsetWidth | 元素.offsetHeight |
| 元素视口宽/元素视口高： | width(宽)+padding（内边距）- 滚动条（17-15不一样）（视口尺寸） | 元素.clientWidth | 元素.clientHeight |
| 元素内容区高度/元素内容区宽度： | 视口尺寸+不可视部分的尺寸 | 元素.scrollWidth | 元素.scrollHeight |
| 获取元素内容滚动距离： | 元素.scrollTop | 元素.scroll left | |
| 获取文档滚动距离 | 根元素.scrollTop | 元素.scroll left | |
| 查询文档滚动尺寸(x水平/y垂直) | window.scrollY | window.scrollX |
浏览器中有几种坐标？
视口坐标，文档坐标 ，光标坐标
