此时就需要实现锚点定位和目录的联动效果:
点击目录时,自动滚动到对应的章节
滚动页面时,自动高亮正在浏览的章节
目录导航组件
目录导航本身是一个静态组件,我们通过props传入章节数据:
function...问题解析
遮挡问题
有时锚点会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。...,避免目录状态丢失。...但是在Next.js的SSR环境下就会有问题:
点击目录链接时,页面不会滚动。
这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。
滚动页面时,目录高亮也失效。...这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。
数据注水
但是点击目录只解决了一半问题,滚动高亮还需要解决。
这里就需要用到数据注水的技术。