title: How to create a mask that fades out scrolled content, but does not overlap the scrollbar?
body: <p>I have a container which <em>is not</em> the <code>body</code> element. This container is scrollable. Now the content should fade out at the top when scrolled.</p>
  
  <p>This container itself is positioned <code>absolute</code>. The markup and CSS are not given and can be changed.</p>
  
  <p>Unfortunately no matter what I try, I end up with two scenarios:</p>
  
  <p><strong>1 The "mask" does scroll up as well:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scrollable {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 40px 0;
    overflow: auto;
    border: 1px solid orange;
  }
  
  .scrollable:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 40px;
    background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scrollable"&gt;
    &lt;p&gt;
      Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
      Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
      bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
      yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
      belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
      Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
      Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
      bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
      yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
      belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>2 The "mask" is overlapping the scrollbar:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .scrollable {
    position: absolute;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 1px solid orange;
  }
  
  .scrollable:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
  }
  
  .content {
    width: 100%;
    height: 100px;
    padding: 40px 0;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scrollable"&gt;
    &lt;p class="content"&gt;
      Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
      Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
      bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
      yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
      belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
      Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
      Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
      bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
      yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
      belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried adding another container to act as the "mask" with different z-indexes, tried fixed positioning etc.</p>
  
  <p>So, I can't figure out any other markup and CSS where:</p>
  
  <ul>
  <li>the content is scrollable</li>
  <li>the "mask" stays at the top</li>
  <li>the "mask" doesn't overlap the scrollbar</li>
  </ul>
  
  <p>How can I solve this?</p>