FullCalendar Timeline视图自动刷新时恢复垂直滚动位置咨询

这个问题我之前也碰到过，FullCalendar在执行removeEvents和addEventSource时，会重新渲染事件列表，导致垂直滚动容器的内容重置，自然就丢失了之前的滚动位置。解决思路很清晰：先保存当前滚动位置，等事件完全加载渲染后再把滚动位置恢复回去。

具体修改你的refreshEvents函数就行，步骤如下：

1. 获取并保存滚动位置：首先找到FullCalendar Timeline视图的垂直滚动容器，获取它的scrollTop值；
2. 执行事件刷新操作：正常调用removeEvents和addEventSource；
3. 恢复滚动位置：确保事件加载完成后，把之前保存的scrollTop值设置回滚动容器。

完整代码示例 #

function refreshEvents() {
  // 1. 获取FullCalendar的垂直滚动容器（根据你的FullCalendar版本调整选择器）
  // 不同版本类名可能不同：v4/v5 Timeline视图用.fc-timeline-body-scroller，旧版本可能用.fc-scroller
  const scrollContainer = $('#divCalendar .fc-timeline-body-scroller');
  
  // 保存当前垂直滚动位置
  const savedScrollTop = scrollContainer.scrollTop();

  // 2. 执行事件刷新操作
  $('#divCalendar').fullCalendar('removeEvents');
  
  // 3. 添加事件源并在加载完成后恢复滚动位置
  // 如果你的eventSource是远程接口（异步加载），一定要用回调确保渲染完成
  $('#divCalendar').fullCalendar('addEventSource', yourEventSource, function() {
    // 事件渲染完成后，恢复之前的滚动位置
    scrollContainer.scrollTop(savedScrollTop);
  });

  // 如果eventSource是本地数组（同步加载），可以直接在addEventSource后设置：
  // $('#divCalendar').fullCalendar('addEventSource', yourEventSource);
  // scrollContainer.scrollTop(savedScrollTop);
}

// 保持你的定时刷新逻辑不变
setInterval(function () { refreshEvents(); }, 30000);

关键细节说明 #

• 滚动容器选择器：不同版本的FullCalendar，滚动容器的类名可能有差异。你可以打开浏览器开发者工具，查看Calendar元素的DOM结构，找到带有overflow-y: auto的那个容器，复制它的类名替换示例中的选择器。
• 异步加载的情况：如果你的事件源是远程API接口，addEventSource是异步执行的，必须在回调函数里恢复滚动位置，否则可能事件还没渲染完就设置了滚动位置，依然会失效。
• 水平滚动的处理：如果是水平滚动位置丢失，逻辑完全一样，只是把scrollTop换成scrollLeft即可。

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