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:

Bài viết này sẽ hướng dẫn bạn cách tích hợp và hiển thị thanh tiến trình (Progress Bar) khi người dùng scroll trang web sử dụng thư viện ReactJS. Thông qua các hướng dẫn chi tiết, bạn sẽ được hướng dẫn cách xác định vị trí cuộn của trang và cập nhật thanh tiến trình tương ứng. Bằng cách sử dụng các tính năng của ReactJS, bạn có thể tạo ra một giao diện người dùng mượt mà và thân thiện với người dùng, cung cấp trải nghiệm duyệt web tốt hơn. Đồng thời, bài viết cũng giải thích cách tối ưu hóa hiệu suất để đảm bảo ứng dụng của bạn chạy mượt mà, kể cả khi có nhiều sự kiện cuộn diễn ra.

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;

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

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.

•••