title: How do I add a top and bottom shadow while scrolling but only when needed?
body: <p><strong>How do I add a shadow when a container overflows but only when needed?</strong></p>
  
  <p>What I mean by this is:</p>
  
  <ul>
  <li>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</li>
  <li>if there isn't content to scroll through, a shadow will not appear</li>
  </ul>
  
  <p>And to clarify further</p>
  
  <ul>
  <li>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 <em>bottom</em> of the page and not the top.</li>
  <li>Same goes if the user is at the bottom of the page expect that there should be a shadow on the top</li>
  <li>if the content does not overflow the container, then <em>no</em> shadow should be shown to keep things clean.</li>
  </ul>
  
  <p>I have working javascript solutions but I want something <strong>purely css</strong> for performance reasons.</p>
  
  <p>Any ideas?</p>