滚动 boxes/bars 由 React 中的 ref jumpy 链接（尤其是移动设备）

Question

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

我认为这可能是由于每个 onScroll 事件相互触发多个 times/contradicting，但无法弄清楚如何让它发挥作用。任何帮助将不胜感激！

渲染的组件：

<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>

以及 onScroll 事件处理程序：

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;
  }
};

注意：renderList() returns 产品卡片

Answer 1

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

https://www.npmjs.com/package/react-scroll-sync

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

滚动 boxes/bars 由 React 中的 ref jumpy 链接（尤其是移动设备）

Scroll boxes/bars linked by ref jumpy in React (especially mobile)

javascript

scroll

ref

reactjs