How do I add a top and bottom shadow while scrolling but only when needed?

Question

How do I add a shadow when a container overflows but only when needed?

What I mean by this is:

• if there is content available to scroll either on top or bottom, show a shadow to tell the user there is more content to scoll
• if there isn't content to scroll through, a shadow will not appear

And to clarify further

• 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.

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

Any ideas?

Answer 1

I think your looking for something like this;

Reference : 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>