滚动内容上的CSS框阴影

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.

我希望有一个带有插入框阴影的div,其中包含滚动内容。不幸的是,box-shadow不会在内容中的元素上进行渲染,而是在背景上进行渲染,但我希望它也能覆盖内容元素。

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.

我偶然发现了这个解决方案:http://jsfiddle.net/HPkd3/(via)。问题是,我不能让它与我的滚动设置一起工作;如果我将面具放在滚动div中,阴影会滚动 - 如果我将它放在div之外,滚动条会在其上投下阴影,这看起来很奇怪。

Any ideas how to get this right?

任何想法如何做到这一点?

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

编辑:一些示例代码: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.

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

4 个解决方案

#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.

警告:要求您猜测滚动条的大小(以像素为单位)。我打赌有一种安全的方法可以用javascript测量这个。如果您只有一个垂直滚动条,则最终会更加简单,因为您不需要调整边距底部。

#2

Here is one possible solution.

这是一种可能的解决方案。

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

我评论了我的CSS样式,你应该很容易理解我的HTML标记。这就是我做的。

Created two divs

创建了两个div

One is acting as the container for the one that has the inset box shadow .outer

一个是作为具有插入框阴影的那个的容器.outer

The other one contains the inset box shadow .inner-content

另一个包含插入框阴影.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

我添加了溢出:滚动到.inner-content div以应用滚动条。 (你也可以改变溢出:滚动到overflow:auto,这也会给你一个滚动条

#3

try this

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

box-shadow:1px 1px 1px 1px#000000 inset;指针事件:无;

#4

-1

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

如果您能提供更多详细信息,我可以提供更具体的答案

#1