Web APIs笔记05——DOM- 网页特效

最新推荐文章于 2026-06-22 22:05:57 发布

原创最新推荐文章于 2026-06-22 22:05:57 发布 · 222 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #html

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了网页滚动事件（scroll）和加载事件（load、DOMContentLoaded），并讲解了如何监听页面或元素的滚动距离。同时，讨论了offset、client和scroll家族属性在获取元素大小和位置中的应用，包括页面元素的宽高、位置以及在窗口尺寸变化时的响应（resize事件）。这些知识对于网页动态效果和交互设计至关重要。

滚动事件和加载事件

滚动事件

当页面进行滚动时触发的事件
事件名：scroll
监听整个页面滚动：

<script>
      //页面滚动事件
      window.addEventListener( 'scroll', function () {
      // 执行的操作
      })
</script>

给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可

加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕：

<script>
      //页面加载事件
      window.addEventListener( 'load', function () {
      // 执行的操作
      })
</script>

给 window 添加 load 事件
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表
、图像等完全加载
事件名: DOMContentLoaded
监听页面DOM加载完毕:给document添加DOMContentLoaded事件

<script>
     document.addEventListener( 'DOMContentLoaded', function () {
     //执行的操作
     })
</script>

元素大小和位置

scroll家族

使用场景：想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，怎么知道页面滚动了100像素？可以使用scroll 来检测页面滚动的距离
获取宽高:
➢获取元素的内容总宽高(不包含滚动条)返回值不带单位
➢scrollWidth和scrollHeight
获取位置:
➢获取元素内容往左、往.上滚出去看不到的距离
➢scrollLeft和scrollTop
➢这两个属性是可以修改的

<script>
      div.addEventListener( 'scroll', function ( ) {
      console.log(this.scrollTop)
      })
</script>

开发中，经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

<script>
      //页面滚动事件
      window.addEventListener( 'scroll', function () {
      // document.documentELement.scrollTop获得当前页面被卷去的头部
      let num = document.documentElement.scrollTop
      console.log( num )
      })
</script>

注意事项：document.documentElement HTML 文档返回对象为HTML元素

offset家族

使用场景：通过js的方式，得到元素在页面中的位置
获取宽高:
➢获取元素的自身宽高、包含元素自身设置的宽高、padding、 border
➢offsetWidth和offsetHeight
获取位置:
➢获取元素距离自己定位父级元素的左、上距离
➢offsetLeft和offsetTop 注意是只读属性

client家族

获取宽高:
➢获取元素的可见部分宽高(不包含边框，滚动条等)
➢clientWidth和clientHeight
获取位置:
➢获取左边框和上边框宽度
➢clientLeft和clientTop 注意是只读属性
会在窗口尺寸改变的时候触发事件：resize

<script>
     window.addEventListener( 'resize', function () {
     //执行的代码
     })
</script>

检测屏幕宽度：

<script>
     window.addEventListener( 'resize', function () {
     let W = document.documentElement.clientWidth
     console.log(w)
     })
</script>

<script>
        // scrollWidth scrollHeight  内容 宽高 （了解）
        let div = document.querySelector('div')
        console.log(div.scrollWidth)  // 150 不带单位
        console.log(div.scrollHeight)  // 336 不带单位
        console.log('----------------------------')
        // offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
        console.log(div.offsetWidth)  // 150 不带单位
        console.log(div.offsetHeight)  // 150 不带单位
        // console.log(div.offsetTop)  //
        // console.log(div.offsetLeft)
        //  client 当前可视区域  不包含滚动条  边框等等
        console.log('----------------------------')
        console.log(div.clientWidth)
        console.log(div.clientHeight)
        console.log(div.clientTop)  // 边框的宽度  了解  呵呵
        console.log(div.clientLeft)
        // 2. 被卷去的头部和左侧
        // div.addEventListener('scroll', function () {
        //     console.log(document.querySelector('div').scrollTop)
        // })
</script>