前端三大家族之scroll,可参照实现滚动加载

本文将介绍 scroll 的三个属性,然后实现滚动监听,参照滚动加载的场景在滚动条距离底部的距离小于 200 的时候进行操作,然后移除滚动监听。
首先是用于获取到元素实际高度和实际宽度的两个属性:

  • scrollHeight :
    这个属性可以获取到元素内容的实际高度,计算方式是 padding + content ,如果元素内容没有超出元素本身设置的 height 获取到的数值应该是和 clientHeight 是一样的【client家族属性】。但是当元素的实际高度已经超出了元素的 height 的范围,而且给元素设置了 overflow:auto; 属性的时候,我们仍然可以使用 scrollHeight 获取到元素的实际高度(包含超出未展示的部分)。
  • scrollWidth :
    这个属性的用法参照上面的 scrollHeight 。

然后是用于获取元素在滚动时被卷去距离的属性:

  • scrollTop :
    这个属性就是在元素的实际高度超出了元素的 height ,而且设置了 overflow:auto; 的时候,用于在滚动时获取到元素上方被滚动条卷去的距离。

三个属性代表的意义如下图:
前端三大家族之scroll,可参照实现滚动加载_第1张图片


熟悉了上面的三个属性之后,就可以在滚动时做一些操作了,代码示例如下:




  
  
  
  Document





  
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd
  • sdasd

欢迎交流!

你可能感兴趣的:(前端三大家族之scroll,可参照实现滚动加载)