如何在react中滚动时将文本保留在屏幕上

.text-container {
  position: fixed;
  top: 50px;
  left: 50px;
}

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

const ScrollableText = () => {
  const [textTop, setTextTop] = useState(50);
  const [textLeft, setTextLeft] = useState(50);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
      setTextTop(50 + scrollTop);
      setTextLeft(50 + scrollLeft);
    };

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

  return (
    <div className="text-container" style={{ top: textTop, left: textLeft }}>
      {/* 文本内容 */}
    </div>
  );
};

export default ScrollableText;