滚动内容上的 CSS 框阴影

Question

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

我偶然发现了这个解决方案：http://jsfiddle.net/HPkd3/（via）。问题是，我无法让它与我的滚动设置一起工作；如果我将遮罩放置在滚动 div 内，则阴影会滚动走 - 如果我将其放置在 div 外部，则滚动条上会投射阴影，这看起来很奇怪。

有什么想法可以解决这个问题吗？

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

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

Answer 1

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

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

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

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

Answer 2

试试这个

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

Answer 3

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

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

1. 创建了两个div
2. 其中一个充当具有插入框阴影的容器

   .outer

3. 另一个包含内嵌框阴影

   .inner-content

4. 我将

   overflow:scroll

   添加到

   .inner-content

   div 以应用滚动条。 （您还可以将

   overflow:scroll

   更改为

   overflow:auto

   ，这也会给您一个滚动条

Answer 4

纯 CSS 解决方案：

animation-timeline

允许推断可滚动元素并相应地设置其样式：

ul {
 --shadow-size: 20px;
 --shadow-color:  #00000055;

 font: 22px Arial;
 border: 1px solid black;
 height: 100px;
 padding: 1em 2em;
 overflow: auto;
 resize: vertical;
 
 background-image: linear-gradient(
   to bottom,
   var(--shadow-color) 0%,
   transparent var(--shadow-size),
   transparent calc(100% - var(--shadow-size)),
   var(--shadow-color) 100%
 );
 background-repeat: no-repeat;
 background-size: 100% calc(var(--scrollable, 0) * 100% + var(--shadow-size));
 background-position: 0 calc(var(--shadow-size) * -1);
 
 animation: scroll-shadows cubic-bezier(.25,.85,.8,.22);
 animation-timeline: scroll(self);
 animation-range: 0 100%;
}

@keyframes scroll-shadows {
  from, to { --scrollable: 1; }
  to {
    background-position: 0 calc(var(--shadow-size) * 0);
  }
}

<ul contentEditable>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>

👉 查看支持表（剧透 - 禁止使用 Firefox）

虽然这个答案可能对大多数人来说没有帮助现在，但随着时间的推移和支持的增长，它肯定会变得越来越相关。

Answer 5

你尝试过这样的事情吗：

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>

如果您可以提供更多详细信息，我可以帮助提供更具体的答案