在 react/next 中滚动溢出组件

Question

所以我有一个具有固定宽度和 overflow-x-auto 的组件。我决定把滚动条隐藏起来，左右换成2arrow/button。如果我向左单击，它会向左滚动，反之亦然。我怎样才能实现这个功能？

这是我的组件

<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

当您使用 tailwind css 时，您可以使用 tailwind 轮播组件来实现此行为。

在 here 上有各种轮播可用。

Answer 2

定位可滚动元素（您可以使用 useRef，因为它是 React）：

const scrollable = useRef(null);

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

创建滚动功能：

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

将此功能添加到 left/right 按钮：

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

在 react/next 中滚动溢出组件

Scroll an overflow component in react/next

javascript

css

reactjs

next.js

tailwind-css