Yinde's Blog

Talk is cheap. Show me the code.

目录
JS原生滚动 滚动到某个元素 (获取元素到滚动区域顶部的距离)
/  

JS原生滚动 滚动到某个元素 (获取元素到滚动区域顶部的距离)

主要原理是通过offsetTop不断计算,获取该元素的顶部到整个滚动区域(展开大小)顶部的具体。

指的注意的是通过offsetParent不断递归累加高度很有可能会跳过滚动区域,所以需要每次叠加后向下查询确认

let  top  =  0
let ele = "你需要滚到该元素位置的元素"
let  scrollBody  =  "你的滚动区域元素 设置了overflow:scroll的元素"

// offsetParent其实会跳过一部分元素 比如你的滚动区域限制元素
// 这会导致滚动幅度过大
// 所以换成检测是否包含滚去区域元素
while (ele  &&  !ele.querySelector('.otto-scroll-body')) {
  top  +=  ele.offsetTop
  ele  =  ele.offsetParent
}
scrollBody.scrollTop = top

标题:JS原生滚动 滚动到某个元素 (获取元素到滚动区域顶部的距离)
作者:zhangzhengyi12
地址:https://blog.yinode.tech/articles/2019/09/06/1567749034413.html

评论