Así que tengo un componente que tiene un ancho fijo con overflow-x-auto. Decidí ocultar la barra de desplazamiento y reemplazarla con 2 flechas/botones tanto a la izquierda como a la derecha. Si hago clic en la izquierda, se desplaza hacia la izquierda y viceversa. ¿Cómo puedo lograr esta funcionalidad?
este es mi componente
<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> 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"}); } <div id="toLeft" onClick={()=>scrollIt(false)}>...</div> <div id="toRight" onClick={()=>scrollIt(true)}>...</div>