Hold position: absolute element in overflow: scroll element when scrolling

I want to preview the image gallery, which is wider than the screen, using overflow: scroll (or auto). On the right, the shadow that overlaps the last visible image should indicate that more images are visible on the right.

Here is the script: http://jsfiddle.net/SBdLg/

Firstly, I thought: “Easy, give this image gallery box-shadow: inset . But it will be shown behind the images. Now with an overlapping div that has position: absolute , I achieve the desired effect, BUT box-shadow also moves when scroll right.

IMHO, this problem would also occur when using an image containing a shadow instead of a div on top.

Is it possible to use the desired effect for CSS?

+6
source share
1 answer

Removing position: relative from the outer DIV and placing the shadow exactly where it is needed (this is an ugly bit) will help you with this.

Check out the demo : http://jsfiddle.net/SBdLg/11/

+1
source

All Articles