为什么滚动进度条不是从左边开始的，而是从中间开始的？(React) (附加图像)

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

const ScrollProgressBar = () => {
  const [scrollPercentage, setScrollPercentage] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const totalScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const currentScrollPosition = window.scrollY;
      const percentage = (currentScrollPosition / totalScrollHeight) * 100;
      setScrollPercentage(percentage);
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className="progress-bar-container">
      <div className="progress-bar" style={{ width: `${scrollPercentage}%` }}></div>
    </div>
  );
};

export default ScrollProgressBar;