DOM网页特效

滚动事件

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

• 事件名：scroll

• 监听整个页面滚动

  • 给 window 或 document 添加 scroll 事件

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

加载事件

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

  • 事件名：load

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

    • 给 window 添加 load 事件

  • 可以针对某个资源绑定load事件

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

  • 事件名：DOMContentLoaded

元素大小和位置

scroll

• 获取宽高

  • 获取元素的内容总宽高（不包含滚动条）返回值不带单位
  • scrollWidth
  • scrollHeight

• 获取位置

  • 获取元素内容往左、往上滚出去看不到的距离
  • scrollLeft
  • scrollTop
  • 这两个属性可以修改

• document.documentElement

  • HTML 文档返回对象为HTML元素

    • document.documentElement。scrollTop

      • 获得当前页面被卷去的头部

offset

• 获取宽高

  • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
  • offsetWidth
  • offsetHeight

• 获取位置

  • 获取元素距离自己定位父级元素的左、上距离
  • offsetLeft
  • offsetTop
  • 是只读属性

client

• 获取宽高

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

• 获取位置

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

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

  • resize

    • 检测屏幕宽度，案例