关于dom中offset client scroll的介绍

DOM 的位置

事件对象的位置

• offsetX | offsetY

  点击的位置在元素上的坐标

• clientX | clientY

  点击的位置在浏览器上的位置
  

• screenX | screenY

  点击的位置在屏幕上的位置。即点击的位置到电脑屏幕边框的 X,Y 距离

• scrollTop

  监听元素上滚动条的滚动高度（返回被卷去的上侧距离)
  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；
  常用 doc.body.scrollTop

• scrollY

  监听浏览器窗口 滚动条的滚动高度

• scrollWidth | scrollHeight

  返回自身实际的宽度、高度,不包含边框

• offsetWidth | offsetHeight

  返回自身包含 padding、内容区的宽度、边框，返回数字不带单位

• clientWidth | clientWidth

  返回自身包含 padding、内容区的宽度，不包含边框，返回数字不带单位

• innerHeight | innerWidth

  获取可视窗口的高度、宽度

位置之间的关系

如果 body 的外边距为 0

• scrollHeight = innerHeight + scrollY(最大)

• document.scrollHeight = el.scrollTop(最大) + getComputedStyle(el,null).height

• getComputedStyle(el,null).height

  语法:let style = window.getComputedStyle(element, [pseudoElt]);

  滚动案例

• 返回顶部

• 固定导航

• 滚动加载更多

• 滚动联动（手机通讯录列表，商品滚动效果）

• 无缝轮播