使用 React 和 Tailwind 創建閱讀進度條

前言

我們在上網的時候經常會看到一些優秀的博客頂部有個進度條，這個進度條有助於讀者衡量閱讀進度，我認爲這個功能可以帶來良好的用戶體驗，所以，應該將其添加到我個人博客上的文章中。那麼，一起來實現吧。

實現邏輯

  1. 獲取頁面可以滾動的高度.

  2. 獲取頁面已經滾動的高度.

  3. 閱讀進度 = 已經滾動的高度 / 頁面可以滾動的高度

代碼

單獨定義一個 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}%)`,
      }}
      class
    />
  )
}

我在這裏使用 transform 和 translate 屬性來製作進度條.

進度爲 0 向左偏移 100% ，進度爲 100 偏移 0，所以使用 translateX(${progress - 100}%)

以上就是本文全部內容，希望這篇文章對大家有所幫助，也可以參考我往期的文章或者在評論區交流你的想法和心得，歡迎一起探索前端。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/E82Kz14tnG4hRSmwZQmacQ

猜你喜歡