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.

Yobert · Answer 1 · 2012-05-12T12:13:52.767

8

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.

edited May 12 '12 at 12:13

answered Apr 11 '12 at 21:15

Yobert

485
5
11

Why is the top still shaded when you're scrolled all the way up? – T. J. Evers Jul 13 '21 at 09:43
@T.J.Evers That comes from .shadow-top which does a bit of a hack to only show the top half of the shadow. – Yobert Aug 27 '21 at 22:52

score 2 · Answer 2 · answered Feb 20 '13 at 09:40

2

try this

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

answered Feb 20 '13 at 09:40

Karthik Raj

181
1
1
7

1

Although this answer is not complete, it's totally legit solution, I use this technique in combination with :before selector to put the shadow above the content block, pointer-events will make sure that all clicks go through. p.s.: pointer-events is quite a new feature. – pronebird Nov 18 '13 at 11:13

score 0 · Answer 3 · answered May 15 '11 at 15:34

0

Here is one possible solution.

I commented my CSS styles and you should easily understand my html markup. Here is what I did.

Created two divs
One is acting as the container for the one that has the inset box shadow .outer
The other one contains the inset box shadow .inner-content
I added overflow:scroll to the .inner-content div to apply your scroll bar. ( you can also change overflow:scroll to overflow:auto which will also give you a scroll bar

answered May 15 '11 at 15:34

breezy

1,910
1
18
35

1

That's where I am now. Consider this modification to your code: http://jsfiddle.net/ZSpSS/1/ The shadow does not cover the red box. – flyx May 15 '11 at 15:46
You want to overlay the red box over the content as a mask? – breezy May 15 '11 at 15:48
No, I just want the shadow to be displayed on the red box like on everything else. See the edit in my question. – flyx May 15 '11 at 15:56
You could add some padding to the .inner-content div - but this will push your div inside and the box shadow won't overlay over the div. So your primary concern and goal is to have the inset box shadow to overlay over the boxes inside the shadow right? – breezy May 15 '11 at 16:00
exactly. Padding wouldn't help anyway because I can scroll the content so that the boxes are directly at the shadow position. – flyx May 15 '11 at 16:20
Is it possible for a shadow to be displayed correctly over the images ? http://jsfiddle.net/G54Td/70/ In this fiddle the image isn't covered by a shadow – Igor Malyk Jun 10 '14 at 18:38

score -1 · Answer 4 · edited May 23 '16 at 10:32

Have you tried something like this:

CSS:

#test{
    width:500px;
    height:200px;
    overflow:auto;
    -moz-box-shadow: inset 1px 1px 20px 4px black;
    -webkit-box-shadow: inset 1px 1px 20px 4px black;
    box-shadow: inset 1px 1px 20px 4px black;
}

HTML:

<div id="test"><p>
sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd 
<br /></p></div>

If you can give more details I can help with a more specific answer

CSS box-shadow on scrolled content

4 Answers4

Linked