javascript实现页面目录功能锚点跳转的姿势（操作页面元素滚动、以及监听滚动）记录

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的范围值根据实际情况而定
     // 操作 
    }
  })

MDN文档
参考文档1
参考文档2