JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<ol>
            <li class="a"></il>
            <li class="b"></il>
            <li class="c"></il>
            <li class="d"></il>
            <li class="e"></il>
            <li class="f"></il>
            <li class="g"></il>
            <li class="h"></il>
</ol>
<button id="scroll-to-c">Scroll to C</button>

CSS

* {
    box-sizing: border-box;
}

ol {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100px;
    width: 500px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-scroll-snap-type: mandatory;

    -ms-scroll-snap-type: mandatory;

    scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    -ms-scroll-snap-points-x: repeat(100%);
    scroll-snap-points-x: repeat(100%);
    //scroll-snap-destination: 50% 50%;
    scroll-behavior: smooth;
}

li {
    display: inline-block;
    border: 2px solid #000;
    height: 100px;
    width: 100%;
}

.a {
    background-color: green;
}
.b {
    background-color: yellow;
}
.c {
    background-color: gray;
}

JavaScript

$('#scroll-to-c').on('click', function (event) {
                var to = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'][Math.round(Math.random() * 8)];
                $('ol').scrollTo('.' + to);
});