React.js日历组件连续滚动与动态加载的技术求助

日历组件可视化视图如下：

当前渲染实现 #

const today = new Date()
const minimumDate = new Date(new Date().setDate(today.getDate() - 14))
const maximumDate = new Date(new Date().setDate(today.getDate() + 14))

const currentDate = minimumDate;
const dateRange = [];

while(currentDate <= maximumDate){
    const newDate = new Date(currentDate); newDate.setHours(0,0,0,0)
    dateRange.push(newDate)
    currentDate.setDate(currentDate.getDate() + 1)
}
const [itemDays, setItemDays] = useState(dateRange)

渲染调用：

itemDays.map((date, i) => <CalendarDay key={i} workout={{}} date={date}/>)

需求与现存问题 #

• 需改为固定数量渲染，避免全量渲染引发的性能问题（当前仅渲染前后14天+当天）
• 需要将滚动位置准确转换为itemDays数组的索引，实现滚动到特定范围时动态加载前后日期
• 尝试过两种方法但精度不足：
  • 获取中心元素判断其在数组中的位置
  • 利用滚动位置+数组长度计算索引（scrollLeft特性导致计算误差）
• 希望实现滚动时自动对齐到中心元素，但缺乏准确索引无法完成

解决方案 #

1. 精确索引计算：基于元素固定宽度 #

假设每个CalendarDay的宽度是固定值dayWidth，通过滚动容器的可视中心位置计算对应索引：

// 替换为你的CalendarDay实际宽度
const dayWidth = 80;
// 滚动容器的Ref，需在组件中绑定
const containerRef = useRef(null);

// 获取当前中心对应的日期索引
const getCenterIndex = () => {
  const container = containerRef.current;
  // 计算可视区域中心的绝对X坐标
  const centerAbsoluteX = container.clientWidth / 2 + container.scrollLeft;
  // 取整得到精确索引
  return Math.round(centerAbsoluteX / dayWidth);
};

2. 动态渲染+滚动边界触发加载 #

维护一个visibleRange状态控制当前渲染的日期范围，滚动时判断中心索引与边界的距离，触发前后日期加载，并自动对齐中心：

// 初始渲染21天，中心对应当天（索引14）
const [visibleRange, setVisibleRange] = useState({ start: 7, end: 27 });
const dayWidth = 80;
const containerRef = useRef(null);

useEffect(() => {
  const handleScroll = () => {
    const container = containerRef.current;
    const centerIndex = getCenterIndex();
    const { start, end } = visibleRange;
    const buffer = 3; // 距离边界3天时触发加载

    // 左边界加载：中心索引接近左边缘，加载左侧7天
    if (centerIndex - start < buffer) {
      const offset = 7;
      setVisibleRange(prev => ({
        start: prev.start - offset,
        end: prev.end - offset
      }));
      // 调整滚动位置，保持中心元素位置不变
      container.scrollLeft += offset * dayWidth;
    }
    // 右边界加载：中心索引接近右边缘，加载右侧7天
    else if (end - centerIndex < buffer) {
      const offset = 7;
      setVisibleRange(prev => ({
        start: prev.start + offset,
        end: prev.end + offset
      }));
      container.scrollLeft -= offset * dayWidth;
    }

    // 自动对齐到中心元素
    const targetScrollLeft = centerIndex * dayWidth - container.clientWidth / 2;
    container.scrollTo({ left: targetScrollLeft, behavior: 'smooth' });
  };

  const container = containerRef.current;
  container.addEventListener('scroll', handleScroll);
  return () => container.removeEventListener('scroll', handleScroll);
}, [visibleRange]);

// 仅渲染可视范围内的日期
const visibleDays = itemDays.slice(visibleRange.start, visibleRange.end + 1);

3. 优化：动态生成日期（替代预生成全量数组） #

无需提前生成所有日期，根据visibleRange动态生成对应日期，减少内存占用：

const generateVisibleDays = (startIndex, endIndex) => {
  const days = [];
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  // 起始日期 = 当天 + (起始索引 - 初始中心索引14)
  const startDate = new Date(today);
  startDate.setDate(today.getDate() + (startIndex - 14));

  for (let i = 0; i <= endIndex - startIndex; i++) {
    const date = new Date(startDate);
    date.setDate(startDate.getDate() + i);
    days.push(date);
  }
  return days;
};

// 直接生成可视范围内的日期，替代原itemDays
const visibleDays = generateVisibleDays(visibleRange.start, visibleRange.end);

内容的提问来源于stack exchange，提问作者user13020816