Hiển thị Progress Bar khi Scroll trang với ReactJS

Tôi đang sử dụng Gatsby cho trang web của mình và tôi đang tìm cách làm thể nào khi người dùng xem một bài viết khi họ cuộn trang thì trên màn hình hiển thị một Progress Bar (thanh tiến trình) nhằm thông báo còn khoảng bao lâu nữa thì hết trang và nó trong như thế này:

Cách hiển thị Progress Bar khi Scroll trang với ReactJs, gatsby-plugin-page-progress

Một tiến trình cố định sẽ hoạt động khi người dùng cuộn trang. Vì vậy tôi đã triển khai nó một cách đơn giản như sau:

import React, { useState, useEffect } from 'react';

interface Props {
  duration?: string;
  height?: string;
}

export const ProgressScroll: React.FC<Props> = ({
  duration, // Option prop
  height,   // Option prop
}: Props) => {
  const [width, setWidth] = useState<string>(null!);

  const onScroll = (): void => {
    const windowScroll =
      document.body.scrollTop || document.documentElement.scrollTop;
    const heightDiff =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    const scrolledParameter = (windowScroll / heightDiff) * 100;
    setWidth(heightDiff > 0 ? `${scrolledParameter}%` : null!);
  };

  useEffect(() => {
    window.addEventListener('scroll', onScroll);

    return (): void => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [width]);

  return (
    <div
      style={{
        backgroundColor: '#ff1a60',
        height: `${height || '3'}px`,
        position: 'fixed',
        top: 0,
        left: 0,
        transitionProperty: 'width',
        transitionDuration: `${duration || '0.5'}s`,
        transitionTimingFunction: `ease-out`,
        width,
        zIndex: 100,
      }}
    />
  );
};

export default ProgressScroll;

Đoạn code trên là một React Component cho một thanh tiến trình cuộn cố định. Bạn có thể dễ dàng sử dụng màu sắc và chiều cao mặc định hoặc có thể được tùy chỉnh. Sử dụng bằng cách gọi ra như sau:

import ProgressScroll from '../components/ProgressScroll';

const BlogPost: React.FC<BlogPostProps> = () => {
  return (
    <Layout>
      <ProgressScroll height="6" duration="0.1" />
    </Layout>
  );
};

Tôi muốn biến nó thành một plugin Gatsby nhưng nó đã tồn tại tại đây.

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.