元素滚动

js基础
748 词
元素滚动scroll系列

元素滚动scroll系列#

元素scroll系列属性#

scroll 即滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。

与client的区别是：client是盒子的实际大小，而scroll是盒子可滚动内容区域的实际大小

scroll系列属性 作用
element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
点击查看盒子scroll属性值点击查看盒子scroll属性值点击查看盒子scroll属性值点击查看盒子scroll属性值点击查看盒子scroll属性值

页面被卷去的头部#

若浏览器的高(或宽)度不足以显示整个页面时，会自动出现滚动条。

当滚动条1向下滚动时，页面上面被隐藏掉的高度，称为页面被卷去的头部，滚动条在滚动时会触发onscroll事件。

三大系列大小对比 作用
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
offset client scroll

主要用法#

  1. offset系列经常用于获得元素位置 offsetLeft、offsetTop
  2. client经常用于获取元素大小 clientWidth、clientHeight
  3. scroll经常用于获取滚动距离 scrollTop、scrollLeft
  4. 注意页面滚动的距离通过 window.pageXOffset获得