CSS box-shadow on scrolled content

Question

I want to have a div with an inset box-shadow that has scrolled content in it. Unfortunately, the box-shadow doesn't get casted on the elements within the content, but rather on the background, but I want it to cover the content elements as well.

I stumbled upon this solution: http://jsfiddle.net/HPkd3/ (via). The problem is, I can't get it to work with my scrolled setup; if I position the mask inside the scrolling div, the shadow scrolls away - and if I position it outside of the div, the scrollbar has the shadow cast upon it, which looks weird.

Any ideas how to get this right?

Edit: Some example code: http://jsfiddle.net/ZSpSS/2/

I want the red squares in this example covered with the shadow, while the shadow should be persistent when I scroll through the content.

Answer 1

I totally have this working! Check out:

http://jsfiddle.net/yobert/6Ff4u/

Note the red background blocks correctly are "under" the shadows.

Caveats: Requires you to guess the size of the scrollbar in pixels. I bet there is a safe way to measure this with javascript though. If you only have a vertical scrollbar, this ends up being much simpler since you don't need to adjust the margin-bottom.

Answer 2

try this

box-shadow:1px 1px 1px 1px #000000 inset; pointer-events: none;