title: how do I display onscroll event only on first scroll?
body: <p>I have a <code>div</code> tag which is used as a card and I want to make the scrollbar only visible when scrolling. I have used states to do this but the scrollbar flickers on every scroll. Can anyone please help me fix this?</p>
  <p>This is the state and <code>handleScroll</code> function:</p>
  <pre><code>const [isScroll, setscroll] = useState(true)
      function handleScroll() {
          console.log(&quot;scroll detected&quot;)
          setscroll(!isScroll)
      }
  </code></pre>
  <p>This is the <code>div</code> where I want to apply the scroll event:</p>
  <pre><code>&lt;div className={`${description} ${isScroll ? des : &quot;&quot;}`} id={classes.des} onScroll={handleScroll}&gt;
  </code></pre>
  <p>This is the CSS:</p>
  <pre><code>.des::-webkit-scrollbar {
  display: none;
  }
  .description {
  background-color: $color-card-backgroung;
  
  padding: 12px;
  flex: 1;
  height: 100%;
  text-align: left;
  overflow-y: scroll;
  
  &amp; &gt; label:last-child {
      font-size: 1.125rem !important;
      color: $color-primary-7 !important;
  }
  
  &amp; &gt; label:nth-child(2) {
      margin-top: 16px;
  }
  }
  </code></pre>