title: Continuous scroll animation while mouse down or button hovered in ReactJs
body: <p>Some context:</p>
  <p>I'm trying to achieve a similar scrolling effect as in Etsy's product image thumbnails carousel. When you hover over the top part of the div, it automatically scrolls until it reveals the last image and same occurs on the bottom part.</p>
  <p>Here's a <a href="https://www.etsy.com/ca/listing/797867857/personalized-charcuterie-planks-and-beer?ref=hp_prn-3&amp;pro=1" rel="nofollow noreferrer">link</a> to a random product where you can check the functionality.</p>
  <p>I've been trying to achieve this with react so I decided to start with scroll on mouse down and stop scrolling on mouse up.</p>
  <p>I found a great example of this <a href="https://jsfiddle.net/ferares/9mw598hd/7/" rel="nofollow noreferrer">here</a></p>
  <p>Problem is that it's using jquery. I tried to convert it to vanilla js and use on my react app but had no success.</p>
  <p>After some more research I ended up with a working solution but the animation is not smooth at all. I used a setInterval hook. Here's my code.</p>
  <pre><code>import { useRef, useState, useLayoutEffect, useEffect } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  const Wrapper = styled.div`
    margin: 5% 40%;
    .test {
      height: 300px;
      width: 100px;
  
      overflow: scroll;
      .inner {
        background-image: linear-gradient(red, blue);
        height: 800px;
        width: 100%;
      }
    }
  `;
  
  function useInterval(callback, delay) {
    const savedCallback = useRef(callback);
  
    useLayoutEffect(() =&gt; {
      savedCallback.current = callback;
    }, [callback]);
  
    useEffect(() =&gt; {
  
      if (!delay) {
        return;
      }
  
      const id = setInterval(() =&gt; savedCallback.current(), delay);
  
      return () =&gt; clearInterval(id);
    }, [delay]);
  }
  
  const Scroll = () =&gt; {
    const scrollRef = useRef();
    const [delay, setDelay] = useState(100);
    const [scrolling, setScrolling] = useState(false);
  
    useInterval(
      () =&gt; {
        console.log(&quot;Scrolling&quot;);
        scrollRef.current.scrollBy({ top: 10, behavior: &quot;smooth&quot; });
      },
      scrolling ? delay : null
    );
  
    return (
      &lt;Wrapper&gt;
        &lt;div ref={scrollRef} className=&quot;test&quot;&gt;
          &lt;div className=&quot;inner&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button
          onMouseDown={() =&gt; setScrolling(true)}
          onMouseUp={() =&gt; setScrolling(false)}
        &gt;
          HOLD DOWN TO SCROLL
        &lt;/button&gt;
      &lt;/Wrapper&gt;
    );
  };
  
  export default Scroll;
  </code></pre>
  <p>I would really appreciate some directions and if possible a quick example on how I can achieve a smooth continuous scrolling</p>