IntersectionObserver + scrollIntoView 实现电梯导航

文章预览

点击上方  前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 电梯导航也被称为锚点导航，当点击锚点元素时，页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧，类似电梯一样。常见的电梯导航效果如下，比如一些官方文档中： image.png image.png 之前可能会用 getBoundingClientRect() 判断元素是否在视口中来实现类似效果，但现在有更方便的方法了，那就是 IntersectionObserver + scrollIntoView ，轻松实现电梯导航。 scrollIntoView() 介绍 scrollIntoView()  方法会滚动元素的父容器，使元素出现在可视区域。默认是立即滚动，没有动画效果。 如果要添加动画效果，可以这么做： scrollIntoView({    behavior :  'smooth'    // instant 为立即滚动 }) 它还有两个可选参数 block 和 inline 。 block 表示元素出现在 ………………………………