如何在滚动时(仅在需要时)添加顶部和底部阴影? [英] How do I add a top and bottom shadow while scrolling but only when needed?

问题描述

如何在容器溢出但仅在需要时添加阴影?

我的意思是:

• 如果有内容可在顶部或底部滚动，请显示阴影以告诉用户还有更多内容可滚动
• 如果没有内容可滚动浏览，则不会出现阴影

并进一步澄清

• 如果容器的内容溢出(即滚动)，并且用户位于内容的最顶部，则页面的底部上应该有阴影，而不是顶部.
• 如果用户位于页面底部，则期望顶部有阴影
，同样如此.
• 如果内容没有溢出容器，则应显示 no 阴影以保持物品清洁.

• if the content of the container overflows (i.e. it scrolls) and the user is at the very top of the content then there should be a shadow on the bottom of the page and not the top.
• Same goes if the user is at the bottom of the page expect that there should be a shadow on the top
• if the content does not overflow the container, then no shadow should be shown to keep things clean.

我有可用的javascript解决方案，但出于性能原因，我想要纯CSS .

I have working javascript solutions but I want something purely css for performance reasons.

有什么想法吗?

推荐答案

我认为您正在寻找类似的东西；

I think your looking for something like this;

参考文献: 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, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 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>

这篇关于如何在滚动时(仅在需要时)添加顶部和底部阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！