Javascript 在react中滚动停止后如何滚动到确切的项目？

我制作了一个简单的

carousel

演示。我一次展示三张卡片（两张完整的卡片和一小部分）。当我单击

next

和

previous

按钮时，它的行为总是相同的，只显示了三张卡片，除非用户对此做出反应，否则我只显示了两张卡片。这个功能运行良好，但我面临一个问题

问题是当我滚动我想要剪下我的物品时。 我有像

蓝色

，

红色

，

绿色

，

黄色

，

蓝色

问题。当我滚动

5px

或

10px

时，如果停止滚动后滚动

蓝色

，它将被剪断。滚动应显示

红色

，

绿色

，

黄色

如果我滚动此部分，请输入

预期输出应滚动到下一张幻灯片

这是我的密码

有更新吗

const onscroll = (e) => {
    const ratio = Math.round(
      parent.current.scrollLeft / slide.current.offsetWidth
    );
    console.log(ratio, "ratio");

    const newIndex = ratio >= 1 ? ratio : 0;
    setxx(newIndex);
    setIndex(newIndex - 1);
  };