I've implemented a tab item list enclosed in a <ul> container with specified max-width and overflow-x properties causing the tab items to overflow.
Below is the foundational code for the <ul> wrapper containing the mapped tab item list:
<ul className="tabs" ref={wrapperRef}>
{tabs.map((tab) => (
<li
onClick={() => setActive(tab)}
className={`tab ${tab === active ? "active" : ""}`}
key={tab}>
{tab}
</li>
))}
</ul>
Furthermore, I have incorporated two absolute positioned buttons on either side that scroll to the ends of the container. These buttons automatically disappear when reaching the respective end of the container. Here is the code snippet:
<div className="tabs__wrapper">
<ul className="tabs" ref={wrapperRef}>
{tabs.map((tab) => (
<li
onClick={() => setActive(tab)}
className={`tab ${tab === active ? "active" : ""}`}
key={tab}>
{tab}
</li>
))}
</ul>
<button className="left" onClick={() => adjustView("left")}>
Left
</button>
<button className="right" onClick={() => adjustView("right")}>
Right
</button>
}
</div>
The issue arises when manually scrolling the content as the buttons remain hidden based on previous interactions. The desired behavior is for the buttons to dynamically appear or disappear depending on scrolling direction. How can this be achieved?
Additionally, I'd prefer the buttons to disappear only after the scrolling process is completed. Any suggestions on achieving this without conditional button rendering?
For a comprehensive view, the full Sandbox link is provided below: https://codesandbox.io/s/tab-scroll-3tzi80