How do I add a top and bottom shadow while scrolling but only when needed?

Question

How do I add a shadow when a container overflows but only when needed?

What I mean by this is:

• if there is content available to scroll

Answer 1

I apologize for answering my own question here but after some googling, I found a good CSS-only solution that works in chrome on macOS.

@Hash provided a solution taken from lea verou's blog. Her solution uses background-attachment: local to achieve the effect however this is currently broken in chrome 59 on macOS??

It worked in 2012 but not in 2017 for me right now at least

---

It works in 2020 now so you can look at the accepted answer instead of this one.