React无限滚动横向周视图日历：上月切换异常求助

核心问题定位 #

切换上月时的瞬间跳转，本质是反向切换时的滚动过渡逻辑与正向切换不对称，且可能存在周数据生成的起始点错误，导致容器未经过平滑滚动就直接渲染了上月初始周。

具体修复步骤 #

• 对齐反向滚动的过渡逻辑
  切换下月时你应该是通过在容器右侧追加周元素，再利用原生平滑滚动实现过渡；而上月切换时需要对称处理：先在容器左侧插入上月周元素，手动调整滚动位置抵消新增元素的宽度，再触发向左的平滑滚动。

  示例代码（假设单周宽度为weekWidth）：

  // 生成目标前一周的数据
  const prevWeek = generatePreviousWeek();
  // 插入到周数据数组头部
  weeks.unshift(prevWeek);
  // 强制同步滚动位置，避免视图跳转到开头
  calendarContainer.scrollLeft += weekWidth;
  // 延迟触发平滑滚动，保证DOM更新完成
  setTimeout(() => {
    calendarContainer.scrollTo({
      left: calendarContainer.scrollLeft - weekWidth,
      behavior: 'smooth'
    });
  }, 0);
  

• 修正周数据生成的起始日期计算
  避免直接以上月第一天作为起始点，而是基于当前显示的第一周起始日期往前推7天来生成前一周数据，保证周的连续性：

  // 当前列表中第一周的起始日期
  const currentFirstWeekStart = weeks[0].startDate;
  // 计算前一周的起始日期
  const prevWeekStart = new Date(currentFirstWeekStart);
  prevWeekStart.setDate(prevWeekStart.getDate() - 7);
  // 生成前一周的完整数据（复用你已有的周生成函数）
  const prevWeek = generateWeek(prevWeekStart);
  

• 完善滚动监听的边界处理
  无限滚动的边缘检测逻辑要对称，向左滚动到接近左边缘时，插入前一周并调整滚动位置，防止视图跳变：

  calendarContainer.addEventListener('scroll', () => {
    const { scrollLeft, clientWidth, scrollWidth } = calendarContainer;
    const threshold = 50; // 触发加载的阈值距离
  
    // 向左滚动到左边缘附近，加载前一周
    if (scrollLeft < threshold) {
      const prevWeek = generatePreviousWeek();
      weeks.unshift(prevWeek);
      // 调整滚动位置，保持当前视图不变
      calendarContainer.scrollLeft += weekWidth;
    }
  
    // 向右滚动到右边缘附近，加载下一周（保留你原有的逻辑即可）
    if (scrollWidth - scrollLeft - clientWidth < threshold) {
      const nextWeek = generateNextWeek();
      weeks.push(nextWeek);
    }
  });
  

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