css – 如何在滚动时添加顶部和底部阴影,但仅在需要时添加?

前端之家收集整理的这篇文章主要介绍了css – 如何在滚动时添加顶部和底部阴影,但仅在需要时添加?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在容器溢出时添加阴影但仅在需要时添加阴影?

我的意思是:

>如果内容可以在顶部或底部滚动,则显示阴影以告知用户有更多内容可供scoll使用
>如果没有要滚动的内容,则不会出现阴影

并进一步澄清

>如果容器的内容溢出(即滚动)并且用户位于内容的最顶部,那么页面底部应该有阴影而不是顶部.
>如果用户位于页面底部,则期望顶部应该有阴影
>如果内容没有溢出容器,则不应显示阴影以保持清洁.

我有工作的JavaScript解决方案,但出于性能原因我想要一些纯粹的CSS.

有任何想法吗?

解决方法

我想你在找这样的东西;

参考:LINK

  1. html {
  2. background: white;
  3. font: 120% sans-serif;
  4. }
  5.  
  6. .scrollBox {
  7. overflow: auto;
  8. width: 200px;
  9. max-height: 200px;
  10. margin: 50px auto;
  11. background: /* Shadow covers */
  12. linear-gradient(white 30%,rgba(255,255,0)),linear-gradient(rgba(255,0),white 70%) 0 100%,/* Shadows */
  13. radial-gradient(50% 0,farthest-side,rgba(0,.2),radial-gradient(50% 100%,0)) 0 100%;
  14. background: /* Shadow covers */
  15. linear-gradient(white 30%,/* Shadows */
  16. radial-gradient(farthest-side at 50% 0,radial-gradient(farthest-side at 50% 100%,0)) 0 100%;
  17. background-repeat: no-repeat;
  18. background-color: white;
  19. background-size: 100% 40px,100% 40px,100% 14px,100% 14px;
  20. /* Opera doesn't support this in the shorthand */
  21. background-attachment: local,local,scroll,scroll;
  22. }
  1. <div class="scrollBox">
  2. <ul>
  3. <li>I Show Below Shadow. Go Down Now</li>
  4. <li>1</li>
  5. <li>2</li>
  6. <li>3</li>
  7. <li>4</li>
  8. <li>5</li>
  9. <li>6</li>
  10. <li>7</li>
  11. <li>8</li>
  12. <li>9</li>
  13. <li>10</li>
  14. <li>11</li>
  15. <li>12</li>
  16. <li>13</li>
  17. <li>14</li>
  18. <li>15</li>
  19. <li>16</li>
  20. <li>17</li>
  21. <li>18</li>
  22. <li>19</li>
  23. <li>20</li>
  24. <li>The end!</li>
  25. <li>No shadow here. See Above. Go Up</li>
  26. </ul>
  27. </div>

猜你在找的CSS相关文章