- You tried using different libraries (react-scroll-shadow, scroll-shadow-element, use-scroll-shadow), but they didn't work for you?
- 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)
- 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
Top comments (0)