div内元素是否在可见区域的判断与控制

应用场景:当DIV内的元素较多时,垂直滚动条很长,我们希望在div外的某项操作能让div内相关的元素自动定位,而不必去手动拖动滚动条,反复寻寻觅觅。

这里,我们只考虑垂直滚动条的情况,使用到div的几个属性即可,分别是:

  • scrollTop
  • scrollHeight
  • clientHeight
而要定位的元素,只需要使用到 offsetTop 属性即可。

基本原理:可见区域总是为 scrollTop 至 scrollTop + clientHeight的区域,只要元素的 offsetTop 在这个范围,即为可见。简单吧,意思就是说,滚动条当然代表的位置为可见的起点,可见的范围当然就是本身所具备的高度。由此,置元素可见,则只需要设置 scrollTop 到元素的 offsetTop 位置即可,严格的来说,是到元素 offsetTop 与 offsetTop - clientHeight 之间即可。

直接看实例,您可以复制代码存为html文件在浏览器中查看。


















效果如下图:
div内元素是否在可见区域的判断与控制_第1张图片


 

你可能感兴趣的:(Web开发)