使用 TailwindCSS 在 React 中创建阅读进度条

最近，我在我最喜欢的一位作家的网站上阅读他的文章。我发现他在文章顶部有一个阅读进度条，可以帮助我判断文章还剩多少内容。

我觉得这能带来良好的用户体验，而且我也应该把它添加到我的个人网站的文章里。于是，我就照做了。

分解

了解用户可以在该页面上向下滚动多少。
查找用户在页面上向下滚动了多少。
将后者除以前者即可得到比率。

瞧，我们得到了滚动百分比，也就是“阅读进度”。

代码片段



import { useEffect, useState } from "react";

/**
 * React Hook to get the scroll percentage from the page, returns value from 0 to 100
 */
export function useReadingProgress() {
  const [completion, setCompletion] = useState(0);
  useEffect(() => {
    function updateScrollCompletion() {
      // see how much we have scrolled
      const currentProgress = window.scrollY;
      // see how much total scroll is available
      let scrollHeight = document.body.scrollHeight - window.innerHeight;
      if (scrollHeight) {
        setCompletion(
          Number((currentProgress / scrollHeight).toFixed(2)) * 100
        );
      }
    }
    // add scroll event listener
    window.addEventListener("scroll", updateScrollCompletion);

    // remove scroll event listener on umount
    return () => {
      window.removeEventListener("scroll", updateScrollCompletion);
    };
  }, []);
  return completion;
}

其余的工作是在 UI 上显示这些信息，为此，我只需在顶部的 NavBar 上显示一个进度条。

造型

我在我的网站上使用了 TailwindCSS，用它制作这个进度条非常容易



export default function NavBar() {
  const completion = useReadingProgress();
  return (
    <nav className="sticky z-50 top-0 backdrop-blur-3xl py-2">
      <span
        id="progress-bar"
        style={{
          transform: `translateX(${completion - 100}%)`,
        }}
        className={`absolute bottom-0 w-full transition-transform duration-150 h-1 bg-yellow-400`}
      />
      {/* Rest of the NavBar */}
    </nav>
  );
}

我们使用transform和translateCSS 属性来制作进度条的 UI。

默认情况下#progress-bar，位于的底部，NavBar但通过使用，translateX我们可以将其移动到 X 轴上。

因为我们translateX(${completion - 100}%)

当进度为 0% 时，它会在 X 轴上平移 -100%，从而消失
进度达到 100% 时，X 轴平移 0%，完全显示

暂时就这些。希望这篇文章对你有帮助！如果你有任何反馈或疑问，欢迎在下面的评论区留言，我很乐意倾听并进行解答。

欲了解更多此类内容，请在Twitter上关注我

直到下一次

鏂囩珷鏉ユ簮锛�https://dev.to/ans human_bhardwaj/creating-a-read-progress-bar-in-react-and-tailwindcss-g1n