offset、client、scroll的使用

滚动事件和加载事件

滚动事件

• 页面进行滚动时触发的事件

• 事件名：scroll

• 监听整个页面滚动：

  window(document).addEventListener('scroll', function () {})
  

• 监听某个元素的内部滚动直接给某个元素加即可

加载事件

• 加载外部资源(如图片、外联 CSS 和 javaScript 等)加载完毕时触发的事件

• 事件名：load

• 监听页面所有资源加载完毕：

  • 给window添加load事件：

    window.addEventListener('load',function () {})
    

• 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表
  、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function () {})

元素大小和位置

scroll家族

• 获取宽高
  • 获取元素的内容总宽高（不包含滚动条）返回值不带单位
  • scrollWidth 和 scrollHeight
• 获取位置
  • 获取元素内容往左、往上滚出去看不到的距离
  • scrollLeft 和 scrollTop
  • 这两个属性是可以修改的

元素.addEventListener('scroll', function () {})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oeF4Dsc3-1668846905935)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665715657051.png)]

• 检测页面滚动距离

  window.addEventListener('scroll', function () {
    console.log(document.documentElement.scrollTop)
  }) 
  

  offset家族

  • 获取宽高
    • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
    • offsetWidth 和 offsetHeight
  • 获取位置
    • 获取元素距离自己定位父级元素的左、上距离
    • offsetLeft 和 offsetTop 注意是只读属性

  client 家族

  • 获取宽高：

  • 获取元素的可见部分宽高（不包含边框，滚动条等）

  • clientWidth 和 clientHeight

  • 获取位置：

    • 获取左边框和上边框宽度
    • clientLeft和clientTop 注意是只读属性

  • 窗口尺寸改变的时候触发事件：

    • resize

      window.addEventListener('resize', function () {})
      

resize

  ```js
  window.addEventListener('resize', function () {})
  ```