滚动内容上的 CSS 框阴影

我想要一个带有插入框阴影的 div，其中包含滚动的内容。不幸的是，盒阴影不会投射在内容中的元素上，而是投射在背景上，但我希望它也覆盖内容元素。

我偶然发现了这个解决方案：http://jsfiddle.net/HPkd3/ http://jsfiddle.net/HPkd3/ (via https://stackoverflow.com/questions/5400130/why-does-a-background-break-a-box-shadow-inset-effect）。问题是，我无法让它与我的滚动设置一起工作；如果我将蒙版放置在滚动 div 内，则阴影会滚动走 - 如果我将其放置在 div 外部，则滚动条上会投射阴影，这看起来很奇怪。

有什么想法如何解决这个问题吗？

编辑：一些示例代码：http://jsfiddle.net/ZSpSS/2/ http://jsfiddle.net/ZSpSS/2/

我希望本示例中的红色方块被阴影覆盖，而当我滚动内容时，阴影应该是持久的。

我完全有这个工作！查看：

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

请注意，红色背景块正确地位于阴影“下方”。

注意事项：要求您猜测滚动条的大小（以像素为单位）。我敢打赌有一种安全的方法可以用 javascript 来测量这个。如果您只有一个垂直滚动条，这最终会简单得多，因为您不需要调整 margin-bottom。