使用scrollEnd事件解决面板同步滚动时scrollIntoView的弹跳问题

一、先修复固定头部问题 #

未开启同步时顶部面板头部随内容滚动，根源是面板布局结构错误。用flex布局实现固定头部+滚动内容的正确方式：

给每个面板容器及内部元素添加以下CSS：

.panel {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保面板占满父容器高度 */
}
.panel-header {
  flex-shrink: 0; /* 头部不被压缩，保持固定高度 */
}
.panel-content {
  flex: 1; /* 内容区占满剩余空间 */
  overflow: auto; /* 内容超出时滚动 */
}

这样不管是否开启同步，所有面板的头部都会固定在顶部，内容区独立滚动。

二、修复同步滚动的竞争问题 #

原代码用scrollIntoView()的方式会触发滚动行为冲突，尤其是底部面板易出现过度滚动。换成滚动比例同步的方式更稳定：

1. 添加全局标志位避免循环触发：

let isSyncing = false;

2. 修改滚动事件处理逻辑，基于比例同步滚动：

$('.panel-content').on('scroll', function() {
  if (isSyncing) return; // 正在同步时跳过当前事件
  if (!$('#sync').is(':checked')) return; // 未开启同步时不处理

  const $current = $(this);
  // 计算当前面板的滚动比例：已滚动距离 / 可滚动总距离
  const scrollRatio = $current.scrollTop() / ($current[0].scrollHeight - $current[0].clientHeight);

  // 找到对应的同步面板（根据你的DOM结构调整选择器，比如配对的面板组）
  const $target = $current.closest('.panel-group').find('.panel-content').not($current);
  
  isSyncing = true;
  // 给目标面板设置同步滚动位置
  $target.each(function() {
    const targetScrollTop = scrollRatio * (this.scrollHeight - this.clientHeight);
    this.scrollTop = targetScrollTop;
  });
  isSyncing = false;
});

三、关键注意事项 #

• 确保所有面板内容区的高度计算正确，scrollHeight - clientHeight是实际可滚动距离，避免出现NaN或0的情况。
• 滚动事件仅绑定到内容区（.panel-content），不要绑定到整个面板，防止头部交互误触发滚动逻辑。
• 若面板配对逻辑复杂，可通过自定义属性（如data-sync-id）关联配对面板，调整$target的选择逻辑即可。

替换原scrollIntoView()逻辑后，即可避免竞争条件导致的底部面板滚到底部问题，同时保持头部固定。

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