Css滚动内容阴影效果

Question

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

我找到了一种现有技术，它使用纯CSS技巧 ，它完全符合我的需要（使用background-color属性）

但是，可滚动内容超出阴影，我需要它低于阴影。

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

Answer 1

您可以尝试使用box-shadow并根据scrollTop值动态应用onscroll事件。 也许是这样的：

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/

---

UPD。 如果div可以向上滚动，我认为OP想要的更多是在顶部显示阴影。 在这种情况下，它甚至更简单：

 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> 

Answer 2

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