两个ScrollView同步滚动失效：修改其他ScrollView的scroll id后滚动位置未变化

我太懂你这种想实现两个ScrollView滚动时实时同步的需求了，不过现在遇到的问题确实挺常见的——你以为修改albumScrollId能触发滚动位置同步，但只有点击按钮设置随机id时才生效，滚动过程中完全没反应对吧？

问题根源 #

你之前依赖albumScrollId来同步滚动的思路有个核心问题：ScrollView的滚动位置并不会因为id的变更自动同步，只有当组件因为id变化重新挂载时，才会把新的id对应的位置应用上，但滚动过程中的位置变化根本不会触发albumScrollId的更新，自然也就没法同步了。点击按钮设置随机id时，其实是强制触发了组件重新渲染，才让滚动位置跟着变了，但这完全不是实时同步的正确姿势。

正确的实现思路 #

我们应该直接监听ScrollView的滚动事件，获取实时的滚动偏移量，然后把这个偏移量同步给另一个ScrollView，同时要注意避免循环触发（比如A滚动触发B滚动，B滚动又触发A滚动的死循环）。

给你举个具体的实现例子（假设你用的是类React的前端框架）：

// 先定义滚动偏移量和同步状态
let scrollOffset = 0;
let isSyncing = false;

// 第一个ScrollView的滚动监听
document.getElementById('scroll-view-1').addEventListener('scroll', (e) => {
  if (isSyncing) return;
  syncScrollPosition(e.target.scrollTop);
});

// 第二个ScrollView的滚动监听
document.getElementById('scroll-view-2').addEventListener('scroll', (e) => {
  if (isSyncing) return;
  syncScrollPosition(e.target.scrollTop);
});

// 同步滚动位置的核心函数
function syncScrollPosition(newOffset) {
  isSyncing = true;
  scrollOffset = newOffset;
  // 同步两个ScrollView的滚动位置
  document.getElementById('scroll-view-1').scrollTop = scrollOffset;
  document.getElementById('scroll-view-2').scrollTop = scrollOffset;
  // 延迟取消同步标记，避免滚动事件冲突
  setTimeout(() => {
    isSyncing = false;
  }, 30);
}

// 按钮的随机滚动功能
document.getElementById('random-scroll-btn').addEventListener('click', () => {
  const randomOffset = Math.floor(Math.random() * 1000);
  syncScrollPosition(randomOffset);
});

关键细节解释 #

• 监听滚动事件：直接从滚动事件中获取scrollTop（垂直滚动）或scrollLeft（水平滚动）的实时值，这才是最准确的滚动位置。
• 避免循环触发：用isSyncing标记来控制，当正在同步滚动时，忽略另一个ScrollView的滚动事件，防止互相触发导致的抖动或死循环。
• 延迟取消同步标记：因为ScrollView的滚动事件是连续触发的，给个短延迟能避免在同步过程中重复触发事件。

这样改完之后，不管你滚动哪个ScrollView，另一个都会实时跟着同步位置，按钮触发的随机滚动也能正常工作啦。

内容来源于stack exchange