How to use scroll inside a container with overflow-x

[NicolasFujisawa]

I have a container with a horizontal list of objects

<ul className="tabs" id="container-tabs">
    {objects.map(({ value }) => (
        <li  key={value}>
            I'm {value}nd tab
        </li>
    ))}
</ul>

css:

ul.tabs {
    overflow-x: scroll;
}

And I'm trying to use buttons in the same container of ul.tabs, should I use Link and Element or is that not possible? I didn't find any example

<button className="scroll-btn scroll-left">LEFT</button>
<button className="scroll-btn scroll-right">RIGHT</button>

And I didn't understand if I need to use a scrollAnimations function or use Link's and Element's

Here is my CodeSandBox

[NicolasFujisawa]

I tried to use scrollAnimation like that, but didn't work:

import * as Scroll from 'react-scroll';
let scroll = Scroll.animateScroll;

Inside the class with:

scrollMoreLeft() {
    scroll.scrollMore(-100, {
        containerId: "container-tabs",
        duration: 100,
        smooth: true
    })
}
scrollMoreRight() {
    scroll.scrollMore(100, {
        containerId: "container-tabs",
        duration: 100,
        smooth: true
    })
}

And on the buttons:

<button className="scroll-btn scroll-left" onClick={ scrollMoreLeft }>LEFT</button>
<button className="scroll-btn scroll-right"  onClick={ scrollMoreRight} >RIGHT</button>

Is there an option to scroll horizontally instead of just on verticals?

[leoynick]

You need to set horizontal property in options.

scroll.scrollMore(100, {
      containerId: "container-tabs",
      duration: 100,
      smooth: true,
      horizontal: true
    })

scrollMoreLeft() {
    scroll.scrollMore(-100, {
        containerId: "container-tabs",
        duration: 100,
        smooth: true,
       horizontal: true
    })
}