滚动内容的CSS框阴影 [英] CSS box-shadow on scrolled content

问题描述

我想创建一个带有插入式框阴影的div，其中包含滚动内容。不幸的是，框阴影并没有投射到内容中的元素上，而是投射到了背景上，但是我希望它也覆盖内容元素。

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.

我偶然发现此解决方案： http://jsfiddle.net/HPkd3/ （通过）。问题是，我无法使其与滚动设置一起使用；如果我将遮罩放置在滚动div内，则阴影会滚开-如果我将其放置在div外部，则滚动条上会投射有阴影，看起来很奇怪。

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?

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

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.

推荐答案

我完全可以使用此功能！检出：

I totally have this working! Check out:

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

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

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

注意事项：要求您猜测滚动条的大小（以像素为单位）。我敢打赌，虽然有一种安全的方法可以用javascript来衡量。如果您只有一个垂直滚动条，那么这将变得非常简单，因为您无需调整下边距。

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.

这篇关于滚动内容的CSS框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！