scroll、offset、client事件的用法及区别

最新推荐文章于 2023-04-06 08:34:55 发布

铃儿响叮当不响

最新推荐文章于 2023-04-06 08:34:55 发布

阅读量250

点赞数

分类专栏：前端js笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36507046/article/details/125881386

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

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>

铃儿响叮当不响

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
scroll、offset、client事件的用法及区别

当页面进行滚动时触发的事件，常用于网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。1、监听整个页面滚动语法给window或者document添加scroll事件若要监听其他元素滚动元素.addEventListener('scroll',function(){})2、获取宽高scrollWidth和scrollHeight获取元素内容的宽高（不包含滚动条）包含padding，不包含边框，返回值不带单位。用法1、使用场景元素的，同样不带单位。...
复制链接

扫一扫