React项目中如何实现一个简单的锚点目录定位

头像
linwu
     广东
    阅读 8 分钟
    头图

    在这里插入图片描述

    小册

    这是我整理的学习资料，非常系统和完善，欢迎一起学习

    前言

    锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节

    • 如何在React中实现锚点定位和平滑滚动
    • 目录自动高亮的实现思路
    • 处理顶部导航遮挡锚点的解决方案
    • 服务端渲染下的实现方案
    • 性能优化策略

    实现基本锚点定位

    首先,我们需要实现页面内基本的锚点定位功能。对于锚点定位来说,主要涉及这两个部分:
    1. 设置锚点,为页面中的某个组件添加id属性
    2. 点击链接,跳转到指定锚点处

    20210106205503299.gif
    例如:

    // 锚点组件
function AnchorComponent() {
  return <h2 id="anchor">This is anchor</h2> 
}

// 链接组件
function LinkComponent() {
  return (
    <a href="#anchor">Jump to Anchor</a> 
  )
}

    当我们点击Jump to Anchor这个链接时,页面会平滑滚动到AnchorComponent所在的位置。

    使用useScrollIntoView自定义hook

    React中实现锚点定位,最简单的方式就是使用useScrollIntoView这个自定义hook。

    import { useScrollIntoView } from 'react-use';

function App() {

  const anchorRef = useRef();  
  const scrollToAnchor = () => {
    useScrollIntoView(anchorRef);
  }

  return (
    <>
      <a href="#anchor" onClick={scrollToAnchor}>
        Jump to Anchor  
      </a>
      
      <h2 id="anchor" ref={anchorRef}>This is anchor</h2>
    </>
  )
}

    useScrollIntoView接受一个ref对象,当调用这个hook函数时,会自动滚动页面,使得ref对象在可视区域内。

    原生scrollIntoView方法

    useScrollIntoView内部其实就是使用了原生的scrollIntoView方法,所以我们也可以直接调用:

    function App() {

  const anchorRef = useRef();

  const scrollToAnchor = () => {
    anchorRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  };

  return (
    <>  
      <a href="#anchor" onClick={scrollToAnchor}>Jump to Anchor</a>
      <h2 id="anchor" ref={anchorRef}>This is anchor</h2> 
    </>
  )

}

    scrollIntoView可以让元素的父容器自动滚动,将这个元素滚动到可见区域。behavior:'smooth'可以启用平滑滚动效果。

    锚点定位和目录联动

    很多时候,我们会在页面中实现一个目录导航,可以快速定位到各个章节。此时就需要实现锚点定位和目录的联动效果:
    • 点击目录时,自动滚动到对应的章节
    • 滚动页面时,自动高亮正在浏览的章节

    目录导航组件

    目录导航本身是一个静态组件,我们通过props传入章节数据:

    function Nav({ chapters }) {
  return (
    <ul className=" chapters">
      {chapters.map(chapter => (
        <li key={chapter.id}>
          <a href={'#' + chapter.id}>  
            {chapter.title}
          </a>
        </li>
      ))}
    </ul>
  )
}

    锚点组件

    然后在页面中的每一章使用Anchor组件包裹:

    function Chapter({ chapter }) {
  return (
    <Anchor id={chapter.id}>  
      <h2>{chapter.title}</h2>
      {chapter.content}
    </Anchor>
  )
}

function Anchor({ children, id }) {
  return (
    <div id={id}>
      {children}  
    </div>
  )
}

    这样通过id属性建立章节内容和目录链接之间的关联。

    处理点击事件

    当点击目录链接时,需要滚动到对应的章节位置:

    function App() {

  //...

  const scrollToChapter = (chapterId) => {
    const chapterEl = document.getElementById(chapterId);
    chapterEl.scrollIntoView({ behavior: 'smooth' });
  }

  return (
    <>
      <Nav 
        chapters={chapters}
        onLinkClick={(chapterId) => scrollToChapter(chapterId)} 
      />
      
      {chapters.map(chapter => (
        <Chapter 
         key={chapter.id}
         chapter={chapter}
        />
      ))}
    </>
  )
}

    给Nav组件传一个onLinkClick回调,当点击链接时,通过chapterId获取到元素,并滚动到可视区域,实现平滑跳转。

    自动高亮

    实现自动高亮也很简单,通过监听滚动事件,计算章节元素的偏移量,判断哪个章节在可视区域内,并更新active状态:

    function App() {

  const [activeChapter, setActiveChapter] = useState();

  useEffect(() => {
    const handleScroll = () => {
      chapters.forEach(chapter => {
        const element = document.getElementById(chapter.id);
        // 获取元素在可视区域中的位置
        const rect = element.getBoundingClientRect();  
        // 判断是否在可视区域内 
        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
          setActiveChapter(chapter.id);
        }
      })
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    }
  }, []);

  return (
    <>
     <Nav
       chapters={chapters}
       activeChapter={activeChapter}
      />
    </>
  )

}

    通过getBoundingClientRect可以得到元素相对于视窗的位置信息,根据位置判断是否在可见区域内,如果是就更新activeChapter状态,从而触发目录的高亮效果。

    问题解析

    遮挡问题

    有时锚点会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。

    常见的解决方案是:

    1. 设置锚点元素margin-top
    #anchor {
  margin-top: 80px; /* header高度 */
}

    直接设置一个和Header高度相同的margin,来防止遮挡。

    1. 在滚动方法中加入offset
    // scroll offset
const scrollOffset = -80; 

chapterEl.scrollIntoView({
  offsetTop: scrollOffset
})

    给scrollIntoView传入一个顶部偏移量,这样也可以跳过Header的遮挡。

    响应式问题

    在响应式场景下,目录的遮挡问题会更复杂。我们需要区分不同断点下,计算匹配的offset。

    可以通过MatchMedia Hook获取当前的断点:

    import { useMediaQuery } from 'react-responsive';

function App() {

  const isMobile = useMediaQuery({ maxWidth: 767 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  
  let scrollOffset = 0;

  if (isMobile) {
    scrollOffset = 46; 
  } else if (isTablet) {  
    scrollOffset = 60;
  } else if (isDesktop) {
    scrollOffset = 80;
  }

  const scrollToChapter = (chapterId) => {
    const chapterEl = document.getElementById(chapterId);

    chapterEl.scrollIntoView({
      offsetTop: scrollOffset  
    })
  }

  //...

}

    根据不同断点,动态计算滚动偏移量,这样可以适配所有情况。

    性能优化

    使用节流

    滚动事件会高频触发,直接在滚动回调中计算章节位置会造成性能问题。

    我们可以使用Lodash的throttle函数进行节流:

    import throttle from 'lodash.throttle';

const handleScroll = throttle(() => {
  // 计算章节位置
}, 100);

    这样可以限制滚动事件最多每100ms触发一次。

    IntersectionObserver

    使用IntersectionObserver提供的异步回调,只在章节进入或者离开可视区域时才执行位置计算:

    import { useRef, useEffect } from 'react';

function App() {

  const chaptersRef = useRef({});

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        // 章节进入或者离开可视区域时更新
      }
    );

    chapters.forEach(chapter => {
      observer.observe(
        document.getElementById(chapter.id)  
      );
    })

  }, []);

}

    这种懒加载式的方式可以大幅减少无效的位置计算。

    SSR支持

    在Next.js等SSR场景下,客户端脚本会延后加载,页面初次渲染时目录联动会失效。

    getInitialProps注水

    可以在getInitialProps中提前计算目录数据,注入到页面中:

    Home.getInitialProps = async () => {

  const chapters = await fetchChapters();

  const mappedChapters = chapters.map(chapter => {
    return {
      ...chapter,
      highlighted: isChapterHighlighted(chapter) 
    }
  });

  return {
    chapters: mappedChapters
  };

};

    hydrate处理

    客户端脚本加载后,需要调用ReactDOM.hydrate而不是render方法,进行数据的补充填充,避免目录状态丢失。

    import { useEffect } from 'react';

function App({ chapters }) {

  useEffect(() => {
    ReactDOM.hydrate(
      <App chapters={chapters} />,  
      document.getElementById('root')
    );
  }, []);

}

    服务端渲染的实现方案

    image.png

    在使用了服务端渲染(SSR)的框架如Next.js等情况下,实现锚点定位和目录联动也会有一些不同。

    主要区别在于:

    • 服务端和客户端环境不统一
    • 脚本加载时间差

    这会导致一些状态错位的问题。

    问题复现

    假设我们有下面的目录和内容结构:

    function Nav({ chapters }) {
  return (
    <ul>
      {chapters.map(ch => (
        <li>
          <a href={'#' + ch.id}>{ch.title}</a>
        </li>
      ))}
    </ul>
  )
}

function Chapter({ chapter }) {

  const ref = useRef();

  // 占位组件
  return <div ref={ref}>{chapter.content}</div> 
}

function App() {

  const chapters = [
    { id: 'chapter-1', title: 'Chapter 1' },
    { id: 'chapter-2', title: 'Chapter 2' },
  ];

  return (
    <>
      <Nav chapters={chapters} />

      <Chapter chapter={chapters[0]} />
      <Chapter chapter={chapters[1]} />
    </>
  )

}

    非SSR环境下,点击链接和滚动都可以正常工作。

    但是在Next.js的SSR环境下就会有问题:

    点击目录链接时,页面不会滚动。

    这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。

    滚动页面时,目录高亮也失效。

    服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。

    预取数据

    首先,我们需要解决点击目录链接的问题。

    既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。

    这里有两个方法:

    1. 组件挂载后主动缓存元素位置
    // Chapter组件

useEffect(() => {
  // 缓存位置数据
  cacheElementPosition(chapter.id, ref.current); 
}, []);

// Utils

const elementPositions = {};

function cacheElementPosition(id, element) {
  const rect = element.getBoundingClientRect();

  elementPositions[id] = {
    left: rect.left,
    top: rect.top,
  }
}
    1. 点击时实时获取元素位置
    // handle link click

const scrollToChapter = (chapterId) => {

  const element = document.getElementById(chapterId);
  const rect = element.getBoundingClientRect();

  window.scrollTo({
    top: rect.top,
    behavior: 'smooth'
  })

}

    无论哪种方法,都需要在组件挂载后获取元素的位置信息。

    这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。

    数据注水

    但是点击目录只解决了一半问题,滚动高亮还需要解决。

    这里就需要用到数据注水的技术。

    简单来说就是:

    • 在服务端渲染时,读取路由参数,提前计算高亮状态
    • 将高亮数据注入到响应中
    • 客户端拿到注水的数据后渲染,不会出现高亮错位

    实现步骤:

    1.服务端获取参数和数据

    // 在getServerSideProps中

export async function getServerSideProps(context) {
  
  const { hashtag } = context.query;

  const chapters = await fetchChapters();

  const highlightedChapter = chapters.find(ch => ch.id === hashtag);

  return {
    props: {
      chapters,
      highlightedChapter  
    }
  }

}

    2.客户端读取props

    function Nav({ chapters, highlightedChapter }) {

  return (
    <ul>
      {chapters.map(ch => (
        <li className={ch.id === highlightedChapter?.id ? 'highlighted' : ''}>
        </li>
      ))}
    </
    Microsoft前端javascripttypescriptreact.jsvue.js
    linwu
    41 声望11 粉丝

    ☀高级前端开发工程师

    « 上一篇
    面试官：你了解axios的原理吗？有看过它的源码吗？
    下一篇 »
    JS中的异步编程与Promise

    引用和评论

    推荐阅读
    头像
    JS中的异步编程与Promise

    linwu阅读 577

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.6k评论 3

    0 条评论
    得票最新