在实现保存虚拟滚动位置的解决方案中，可以使用以下步骤：

1. 在滚动容器组件中，使用 useState 钩子来保存滚动位置的状态。

import React, { useState } from 'react';

const ScrollContainer = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  const handleScroll = () => {
    const position = window.scrollY;
    setScrollPosition(position);
  };

  // 监听滚动事件
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      
Scroll Position: {scrollPosition}
    
  );
};

export default ScrollContainer;

2. 将保存的滚动位置应用到滚动容器组件中。

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

const ScrollContainer = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  const handleScroll = () => {
    const position = window.scrollY;
    setScrollPosition(position);
  };

  useEffect(() => {
    // 获取保存的滚动位置
    const savedPosition = localStorage.getItem('scrollPosition');
    if (savedPosition) {
      window.scrollTo(0, parseInt(savedPosition));
    }

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

  // 在滚动事件中保存滚动位置
  useEffect(() => {
    const handleSaveScrollPosition = () => {
      localStorage.setItem('scrollPosition', scrollPosition.toString());
    };

    window.addEventListener('beforeunload', handleSaveScrollPosition);
    return () => {
      window.removeEventListener('beforeunload', handleSaveScrollPosition);
    };
  }, [scrollPosition]);

  return (
    

      
Scroll Position: {scrollPosition}
    
  );
};

export default ScrollContainer;

在上面的例子中，我们使用 localStorage 来保存滚动位置。在组件加载时，我们首先检查是否有保存的滚动位置，并将其应用到窗口上。然后，在滚动事件中，我们将滚动位置保存到 localStorage 中以便在刷新页面或关闭页面时进行持久化保存。