title: How do I detect if an element scrolls off the viewport using React?
body: <p><a href="https://i.stack.imgur.com/TH1ty.png" rel="nofollow noreferrer">Sample design</a></p>
  <p>I want to add a custom gradient style when the element is no longer visible inside the viewport. By default, the buttons are solid colors but when scrolled to the left outside the viewport, the edge should have a gradient such as <a href="https://i.stack.imgur.com/TH1ty.png" rel="nofollow noreferrer">this</a>.</p>