对于锚点定位来说,主要涉及这两个部分:
设置锚点,为页面中的某个组件添加id属性
点击链接,跳转到指定锚点处
例如:
// 锚点组件
function AnchorComponent() {...处理点击事件
当点击目录链接时,需要滚动到对应的章节位置:
function App() {
//......但是在Next.js的SSR环境下就会有问题:
点击目录链接时,页面不会滚动。
这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。
滚动页面时,目录高亮也失效。...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。
预取数据
首先,我们需要解决点击目录链接的问题。
既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。...这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。
数据注水
但是点击目录只解决了一半问题,滚动高亮还需要解决。
这里就需要用到数据注水的技术。
云服务器
ICP备案
对象存储
腾讯会议
云直播
