1. You tried using different libraries (react-scroll-shadow, scroll-shadow-element, use-scroll-shadow), but they didn't work for you?
2. You even tried to write your own solution using background-attachment, but that didn't work too, the shadow displayed behind the elements (of course, because it's background, not foreground)
3. JS seems cool, but too heavy, and you are tired of catching bugs with this solution

Hello there, I know what else you can do:

4. Try using sticky

This thing saved me a lot when I was developing scrollable content

Take a look here:

How to do this?

It's pretty simple, you should structure your scrollable block like this:

/* Wrapper styles, sometimes you might need overflow-x-hidden */
<div style={{position: 'relative', overflow: 'overflow-y-auto'}}>
 /* Upper shadow block */
 <div style={{position: 'sticky', zIndex: '10', top: '-1px', 
 'linear-gradinet(to bottom, '#00000000' '#fff')'}} />

<p>Bunch of your content here</p>

 /* Bottom shadow block */
 <div style={{position: 'sticky', zIndex: '10', bottom: '-1px', 
 backgroundImage: 'linear-gradinet(to bottom, '#fff' 
 '#00000000')'}} />
</div>

Phew, hope I didn't mess up the styling part, I don't want to include the .css file, because you'll understand the code better in one plate

Good luck doing great layouts :)