So I have a ponent that have a fixed width with an overflow-x-auto. I decided to hide the scroll bar and replace it with 2 arrow/button both left and right. If I click left, it scroll to left and vice versa. How can I achieve this functionality ?

this is my ponent

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

So I have a ponent that have a fixed width with an overflow-x-auto. I decided to hide the scroll bar and replace it with 2 arrow/button both left and right. If I click left, it scroll to left and vice versa. How can I achieve this functionality ?

this is my ponent

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

• javascript
• css
• reactjs
• next.js
• tailwind-css

Share Improve this question Follow asked Apr 17, 2022 at 8:24 BlueBeretBlueBeret 60211 gold badge99 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

1. Target the scrollable element (you can use useRef, since it's react):

const scrollable = useRef(null);

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

2. Create the scroll function:

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

3. Add this function to the left/right buttons:

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

As you are using tailwind css, you can use a tailwind carousal ponent to achieve this behaviour.

There are various carousals available over here.