javascript实现页面目录功能锚点跳转知识点总结
假dom A是滚动条的盒子, B是A的子元素,实现B滚动到A可视范围的顶部的方法(仅记录我是用的两种方法)
1、scrollTo方法
通过A(滚动条的盒子)的scrollTo方法,设置top为B的offsetTop属性值
scrollTo:Element(滚动条的盒子) 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置
A.scrollTo({
top: B.offsetTop,
behavior: 'smooth' // 让滚动又湿又滑
})
2、scrollIntoView
通过B(子元素)的scrollIntoView方法使B进入到A的可视范围内
scrollIntoView:Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见
B.scrollIntoView({ block: 'start', behavior: 'smooth' })
一般使用scrollIntoView就能满足大部分情况操作dom滚动到父容器的可视范围内(顶部start、中间center、底部end、就近nearest)的功能。但是如果需要dom滚动到父容器可视范围内指定像素的位置则需要使用scrollTo来精准定位
例如遇到的情况 滚动条的盒子A里有个子元素C固定定位(或者其他脱离文档流的操作)在A的顶部,此时操作B滚动到A可视范围内的顶部时就会被C的高度遮挡一部分
使用scrollTo方法解决:设置top属性值为B.offsetTop减去C的高度值
A.scrollTo({
top: B.offsetTop - Hc,
behavior: 'smooth'
})
监听A(滚动条的盒子)的滚动事件
监听A(滚动条的盒子)的滚动事件比较e.target.scrollTop的值与B.offsetTop的值判断B是否在A的可视范围内
A.addEventListener('scroll', function(e){
if(Math.abs(B.offsetTop - e.target.scrollTop) < 200){ // 200的范围值根据实际情况而定
// 操作
}
})