Javascript 通过React中的ref jumpy链接的滚动框/条（尤其是移动）

我构建了一个react组件，它将许多产品卡映射到一个水平行中。当这些卡比屏幕长时，会发生溢出，组件底部会出现一个滚动条，允许用户沿卡左右滚动。我还希望在卡片上方可以看到一个滚动条，因此我添加了一个额外的div，该div的大小取自产品卡片div（via ref），并用滚动条显示一个空div。然后，我将此divs滚动位置与产品卡滚动位置链接，反之亦然，以确保两者相同。这是可行的，但当滚动时，尤其是在移动设备上滚动时，会出现起伏/跳跃

我想这可能是因为每个onScroll事件都多次触发/相互矛盾，但无法解决如何使其工作。任何帮助都将不胜感激

渲染的组件：

<div>
  {checkWidth() ? (
    <div
      className="ui link cards topscroll"
      ref={topScrollRef}
      onScroll={onScroll}
    >
      <div
        style={{
          minWidth: bottomScrollRef.current.scrollWidth,
          overflowX: "scroll",
        }}
      ></div>
    </div>
  ) : (
    ""
  )}
  <div
    ref={bottomScrollRef}
    onScroll={onScroll}
    className="ui link cards bottomscroll"
  >
    {renderList()}
  </div>
</div>

---

注意：renderList（）返回产品卡

我发现最好的方法是使用npm包react scroll sync

---

这允许您以最小的跳跃（不完美）同步两个滚动条

我发现最好的方法是使用npm软件包react scroll sync

---

这允许您以最小的跳跃（不完美）同步两个卷轴。

找到更好的方法了吗？不幸的是没有。实际上，为了避免这个问题，我最终删除了滚动条。不太理想，但我找不到其他解决办法。对不起，我能理解。我还建议我的团队摆脱现有的滚动行为。谢谢你的回复。@Helper我在下面回答了我最终是如何重新实现的。仍然不是完美的，但是比上面使用裁判时要少很多。希望这有帮助！非常感谢@webdog回复我关于同样的问题。有没有找到更好的方法？不幸的是没有。实际上，为了避免这个问题，我最终删除了滚动条。不太理想，但我找不到其他解决办法。对不起，我能理解。我还建议我的团队摆脱现有的滚动行为。谢谢你的回复。@Helper我在下面回答了我最终是如何重新实现的。仍然不是完美的，但是比上面使用裁判时要少很多。希望这有帮助！非常感谢@webdog回复我关于同样的问题。

const onScroll = (el) => {
  if (
    el.target.className === "ui link cards topscroll" &&
    bottomScrollRef.current.scrollLeft !== topScrollRef.current.scrollLeft
  ) {
    bottomScrollRef.current.scrollLeft = topScrollRef.current.scrollLeft;
  } else if (
    el.target.className === "ui link cards bottomscroll" &&
    topScrollRef.current.scrollLeft !== bottomScrollRef.current.scrollLeft
  ) {
    topScrollRef.current.scrollLeft = bottomScrollRef.current.scrollLeft;
  }
};