如何在容器溢出时添加阴影但仅在需要时添加阴影?
我的意思是:
>如果内容可以在顶部或底部滚动,则显示阴影以告知用户有更多内容可供scoll使用
>如果没有要滚动的内容,则不会出现阴影
并进一步澄清
>如果容器的内容溢出(即滚动)并且用户位于内容的最顶部,那么页面底部应该有阴影而不是顶部.
>如果用户位于页面底部,则期望顶部应该有阴影
>如果内容没有溢出容器,则不应显示阴影以保持清洁.
我有工作的JavaScript解决方案,但出于性能原因我想要一些纯粹的CSS.
有任何想法吗?
解决方法
我想你在找这样的东西;
参考:LINK
- html {
- background: white;
- font: 120% sans-serif;
- }
- .scrollBox {
- overflow: auto;
- width: 200px;
- max-height: 200px;
- margin: 50px auto;
- background: /* Shadow covers */
- linear-gradient(white 30%,rgba(255,255,0)),linear-gradient(rgba(255,0),white 70%) 0 100%,/* Shadows */
- radial-gradient(50% 0,farthest-side,rgba(0,.2),radial-gradient(50% 100%,0)) 0 100%;
- background: /* Shadow covers */
- linear-gradient(white 30%,/* Shadows */
- radial-gradient(farthest-side at 50% 0,radial-gradient(farthest-side at 50% 100%,0)) 0 100%;
- background-repeat: no-repeat;
- background-color: white;
- background-size: 100% 40px,100% 40px,100% 14px,100% 14px;
- /* Opera doesn't support this in the shorthand */
- background-attachment: local,local,scroll,scroll;
- }
- <div class="scrollBox">
- <ul>
- <li>I Show Below Shadow. Go Down Now</li>
- <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>
- <li>The end!</li>
- <li>No shadow here. See Above. Go Up</li>
- </ul>
- </div>