CSS 滚动内容阴影效果

Question

我正在寻找一个插件（类似于固定标题），它可以在可滚动内容上创建盒子阴影效果（当您向下滚动时）。

我发现了一种现有的技术，使用纯CSS技巧，它正好做我需要的事情（使用background-color属性）

然而，可滚动内容出现在阴影之上，而我需要它出现在阴影之下。

是否有任何插件可以创建相同的效果，但使用具有阴影和动态不透明度的内部div或类似的东西？

- Catalin

Answer 1

您可以尝试使用box-shadow，并在onscroll事件中根据scrollTop值动态应用它。也许可以像这样实现：

document.querySelector('div').onscroll = function() {
    this.classList[this.scrollTop < 20 ? 'add' : 'remove']('shadow-top');
    this.classList[this.scrollHeight - this.clientHeight - this.scrollTop < 20 ? 'add' : 'remove']('shadow-bottom');
};

示例: http://jsfiddle.net/0aevh7kv/

---

更新. 我认为原帖想要展示的是如果div可以向上滚动，则在顶部显示阴影。在这种情况下，方法更加简单：

document.querySelector('div').onscroll = function() {
    this.classList[this.scrollTop > 20 ? 'add' : 'remove']('shadow-top');
};

ul, li { padding: 0; margin: 0; }

div {
  height: 200px;
  border: 1px #AAA solid;
  overflow: auto;
  transition: box-shadow .2s ease;
}
div.shadow-top {
  box-shadow: inset 0 4px 10px -3px #808080;
}

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

- dfsq

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Catalin

Answer 2

你可以使用box-shadow: inset 0 0 10px #000000;作为示例。 http://css-tricks.com/snippets/css/css-box-shadow/

- naoxink

---

阴影只有在滚动内容向下时才需要可见。就像是一种视觉反馈，告诉你有内容超出了可见的滚动区域。 - Catalin

@RaraituL 你可以使用jQuery来切换它 :) - naoxink

如果我切换它（仅在滚动时显示/隐藏阴影），我将不会有渐进效果。我需要阴影根据滚动的程度从浅灰色到深灰色。 - Catalin

@RaraituL 你可以使用 CSS 设置动画。 - naoxink