当前位置：网站首页>scroll、offset、client事件的用法及区别
scroll、offset、client事件的用法及区别
2022-08-02 14:20:00 【铃儿响叮当不响】
scroll滚动事件
当页面进行滚动时触发的事件，常用于网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。
1、监听整个页面滚动：
语法：window.addEventListener('scroll',function(){})
给window或者document添加scroll事件
若要监听其他元素滚动 元素.addEventListener('scroll',function(){})
2、获取宽高 scrollWidth 和scrollHeight
获取元素内容的宽高（不包含滚动条）包含padding，不包含边框，返回值不带单位。
用法： div.scrollWidth div.scrollHeight
3、获取位 scrollLeft和scrollTop
获取元素内容往左、往上滚出去看不到的距离，这两个属性可以赋值可以修改，返回值不带单位。
4、检测页面滚动的头部距离 document.documentElement.scrollTop
1）这里document.documentElement 返回页面全部的html代码
2）得到页面滚动的距离:
window.addEventListener('scroll',function(){
console.log(document.documentElement.scrollTop)
})
3）给页面的scrollTop重新赋值：document.documentElement.scrollTop = 1000
offset事件
1、使用场景
通过js的方式，得到元素在页面中的位置。
2、获取宽高 offsetWidth offsetHeight
获取元素的自身宽高 （不包含滚动条）、包含盒子本身的宽高+padding+border，同样不带单位。
用法： div.offsetWidth div.offsetHeight
3、获取位置 offsetLeft offsetTop（只读属性）
获取元素距离自己定位父级元素的左、上距离，同样不带单位。
注意：offsetLeft offsetTop 是只读属性无法修改
client事件
1、获取宽高 clientWidth clientHeight
盒子本身的宽高+padding（不包含边框，滚动条等）
2、获取屏幕宽度
document.documentElement.clientWidth
3、clientLeft clientTop （只读属性）
div.clientLeft 盒子左边框厚度 div.clientTop 盒子上边框厚度
关于client事件的小案例
- 窗口尺寸改变的时候触发事件 resize
window.addEventListener('resize',function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: pink;
}
</style>
</head>
<body>
<script>
// 窗口变化的时候触发的事件
window.addEventListener('resize',function(){
// //屏幕可视区域宽度
// console.log(document.documentElement.clientWidth)
let w = document.documentElement.clientWidth
if ( w >= 1920){
document.body.style.backgroundColor = 'pink'
} else if( w > 800){
document.body.style.backgroundColor = 'skyblue'
} else{
document.body.style.backgroundColor = 'orange'
}
})
</script>
</body>
</html>
