JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div>
        <div style="background: lightblue">1</div>
        <div style="background: lightcoral">2</div>
        <div style="background: lightblue">3</div>
        <div style="background: lightcoral">4</div>
        <div style="background: lightblue">5</div>
        <div style="background: lightcoral">6</div>
        <div style="background: lightblue">7</div>
        <div style="background: lightcoral">8</div>
        <div style="background: lightblue">9</div>
        <div style="background: lightcoral">10</div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.parent {
    overflow: auto;
}
.parent div {
    width: 10000px;
}
.parent div div {
    width: 200px;
    height: 200px;
    float: left;
    font-family: Arial;
    font-size: 100px;
    line-height: 200px;
    text-align: center;
    color: white;
}

JavaScript

var delay = 250;
var timeout = null;
document.querySelector(".parent").onscroll = function()
{
    clearTimeout(timeout);
    timeout = setTimeout(function()
                         {
                             document.querySelector(".parent").scrollLeft = Math.round(document.querySelector(".parent").scrollLeft / 200) * 200;
                         }, delay);
};