前言
锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节
如何在React中实现锚点定位和平滑滚动
目录自动高亮的实现思路
处理顶部导航遮挡锚点的解决方案
服务端渲染下的实现方案...="anchor" ref={anchorRef}>This is anchor
)
}
scrollIntoView可以让元素的父容器自动滚动,将这个元素滚动到可见区域...此时就需要实现锚点定位和目录的联动效果:
点击目录时,自动滚动到对应的章节
滚动页面时,自动高亮正在浏览的章节
目录导航组件
目录导航本身是一个静态组件,我们通过props传入章节数据:
function...但是在Next.js的SSR环境下就会有问题:
点击目录链接时,页面不会滚动。
这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。
滚动页面时,目录高亮也失效。...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。
预取数据
首先,我们需要解决点击目录链接的问题。
既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。
