关于前端:React项目中如何实现一个简单的锚点目录定位

小册

这是我整顿的学习材料，十分零碎和欠缺，欢送一起学习

古代JavaScript高级小册
深入浅出Dart
古代TypeScript高级小册
linwu的算法笔记📒

前言

锚点目录定位性能在长页面和文档类网站中十分常见,它能够让用户疾速定位到页面中的某个章节

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

实现根本锚点定位

首先,咱们须要实现页面内根本的锚点定位性能。对于锚点定位来说,次要波及这两个局部:

设置锚点,为页面中的某个组件增加id属性
点击链接,跳转到指定锚点处

例如:

// 锚点组件
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遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。

常见的解决方案是:

设置锚点元素margin-top

#anchor {
  margin-top: 80px; /* header高度 */
}

间接设置一个和Header高度雷同的margin,来避免遮挡。

在滚动办法中退出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')
    );
  }, []);

}

服务端渲染的实现计划

在应用了服务端渲染(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,那就须要在客户端去获取元素地位。

这里有两个办法:

组件挂载后被动缓存元素地位

// 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,
  }
}

点击时实时获取元素地位

// 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>
      ))}
    </

关于前端:React项目中如何实现一个简单的锚点目录定位

小册

前言

实现根本锚点定位

应用useScrollIntoView自定义hook

原生scrollIntoView办法

锚点定位和目录联动

目录导航组件

锚点组件

解决点击事件

主动高亮

问题解析

遮挡问题

响应式问题

性能优化

应用节流

IntersectionObserver

SSR反对

getInitialProps注水

hydrate解决

服务端渲染的实现计划

问题复现

预取数据

数据注水

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于前端:React项目中如何实现一个简单的锚点目录定位

小册

前言

实现根本锚点定位

应用useScrollIntoView自定义hook

原生scrollIntoView办法

锚点定位和目录联动

目录导航组件

锚点组件

解决点击事件

主动高亮

问题解析

遮挡问题

响应式问题

性能优化

应用节流

IntersectionObserver

SSR反对

getInitialProps注水

hydrate解决

服务端渲染的实现计划

问题复现

预取数据

数据注水

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复