主要观点总结
本文介绍了如何使用IntersectionObserver和scrollIntoView实现电梯导航效果，包括关键技术的介绍和实践示例。
关键观点总结
关键观点1: scrollIntoView方法介绍
scrollIntoView方法用于滚动元素的父容器，使元素出现在视口。可以设置行为方式、垂直和水平对齐方式等参数。
关键观点2: IntersectionObserver API介绍
IntersectionObserver API可以异步检测目标元素与祖先元素或顶级文档的视口相交情况的变化，能判断元素是否在视口中，并监听元素在视口中的可见部分的比例。
关键观点3: 电梯导航实现步骤
1. 创建IntersectionObserver实例，监听目标元素的相交情况；2. 点击导航菜单，使用scrollIntoView方法滚动到对应的内容区域；3. 在页面滚动时，根据目标元素在视口中的显示比例，改变对应导航的样式。
关键观点4: 解决连续元素切换时的问题
当连续两个元素在视口中显示比例较高时，可以通过设置IntersectionObserver的threshold数组，更精细地控制导航菜单的高亮显示。
文章预览
点击上方 前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 电梯导航也被称为锚点导航，当点击锚点元素时，页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧，类似电梯一样。常见的电梯导航效果如下，比如一些官方文档中： image.png image.png 之前可能会用 getBoundingClientRect() 判断元素是否在视口中来实现类似效果，但现在有更方便的方法了，那就是 IntersectionObserver + scrollIntoView ，轻松实现电梯导航。 scrollIntoView() 介绍 scrollIntoView() 方法会滚动元素的父容器，使元素出现在可视区域。默认是立即滚动，没有动画效果。 如果要添加动画效果，可以这么做： scrollIntoView({ behavior : 'smooth' // instant 为立即滚动 }) 它还有两个可选参数 block 和 inline 。 block 表示元素出现在
………………………………
