使用 React 和 Tailwind 创建阅读进度条

sxkk20081年前 (2023-11-23)知识分享97

前言

我们在上网的时候经常会看到一些优秀的博客顶部有个进度条，这个进度条有助于读者衡量阅读进度，我认为这个功能可以带来良好的用户体验，所以，应该将其添加到我个人博客上的文章中。那么，一起来实现吧。

实现逻辑

获取页面可以滚动的高度.
获取页面已经滚动的高度.
阅读进度=已经滚动的高度/页面可以滚动的高度

代码

单独定义一个 react hook 来活动当前的阅读进度

import { useEffect, useState } from 'react'

export function useReadingProgress() {
  const [progress, setProgress] = useState(0)
  useEffect(() => {
    function updateScroll() {
      // 已经滚动的高度
      const currentScrollY = window.scrollY
      // 可以滚动的高度
      let scrollHeight = document.body.scrollHeight - window.innerHeight
      if (scrollHeight) {
        setProgress(Number((currentScrollY / scrollHeight).toFixed(2)) * 100)
      }
    }
    // 添加全局滚动事件的监听
    window.addEventListener('scroll', updateScroll)

    // 移除监听
    return () => {
      window.removeEventListener('scroll', updateScroll)
    }
  }, [])
  return progress
}

剩下的工作是将进度显示在页面上，为此，我在顶部的导航栏上显示一个进度条。

样式

我的博客使用了 TailwindCSS，用它制作进度条非常容易

export default function ProgressBar() {
  const progress = useReadingProgress()
  return (
    <div
      style={{
        transform: `translateX(${progress - 100}%)`,
      }}
      className="fixed top-0 left-0 h-1 w-full bg-primary-500 backdrop-blur-3xl transition-transform duration-150"
    />
  )
}