滚动react/next中的溢出组件

Question

所以我有一个固定宽度的组件，它有一个溢出-x-汽车。我决定隐藏滚动条，并将其替换为左右两个箭头/按钮。如果我点击左边，它会滚动到左边，反之亦然。如何实现此功能？

这是我的组件

<div className={` vertical-card w-7/12 flex flex-row overflow-x-scroll no-scrollbar pb-4`}>
            {
                dataConselor.map((item, index) => {
                    return <VerticalCard key={item.id} name={item.nama} specialist={item.specialist} shortdesc={item.shortdesc} img={item.img} />
                })
            }

        </div>

Answer 1

1. 针对可滚动元素(您可以使用useRef，因为它是反应性的)：

const scrollable = useRef(null);

<div id="myElement" ref={scrollable}>
...
</div>

1. 创建滚动功能：

const scrollIt = (toRight) => {
  const scrollLength = ... //Calculate your scroll length however you want.
  scrollable.current.scrollBy({left: scrollLength * (toRight ? 1 : -1), behavior: "smooth"});
}

1. 将此函数添加到左/右按钮：

<div id="toLeft" onClick={()=>scrollIt(false)}>...</div>
<div id="toRight" onClick={()=>scrollIt(true)}>...</div>

Answer 2

当您使用顺风css时，您可以使用顺风角组件来实现这种行为。

在这里上有各种各样的carousals。