title: how to scroll to exact item after scrolling stop in react?
body: <p>I make a simple demo of <code>carousel</code>. I am showing three cards at one time (two full cards and one small portion). When I click <code>next</code> and <code>previous</code> button it behave the same always by showing three cards except when user react to end there I am showing only <code>two cards</code>. This functionality is working fine, but  I am facing one issue.</p>
  <p>The issue is when I scroll I want <code>snipped</code> my item.
  I have items like <code>blue</code>,<code>red</code>,<code>green</code>,<code>yellow</code>,<code>blue</code>.</p>
  <p>Issue.when I scroll <code>5px</code> or <code>10px</code> it will snipped in other words if we scroll <code>blue</code> after stop scrolling scroll it should be show <code>red</code>,<code>green</code>,<code>yellow</code>.</p>
  <p>Input If I scroll this part .</p>
  <p><a href="https://i.stack.imgur.com/K0nUt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K0nUt.png" alt="enter image description here" /></a></p>
  <p><strong>Expected output</strong> it should scroll to next slide</p>
  <p><a href="https://i.stack.imgur.com/bGrOD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bGrOD.png" alt="enter image description here" /></a></p>
  <p>here is my code
  <a href="https://codesandbox.io/s/youthful-greider-3k0md?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/youthful-greider-3k0md?file=/src/App.js</a></p>
  <pre><code>const onscroll = (e) =&gt; {
      const ratio = Math.round(
        parent.current.scrollLeft / slide.current.offsetWidth
      );
      console.log(ratio, &quot;ratio&quot;);
  
      const newIndex = ratio &gt;= 1 ? ratio : 0;
      setxx(newIndex);
      setIndex(newIndex - 1);
    };
  </code></pre>
  <p>any update .?</p>