Add linear gradient to a scrollable div

Question

I need to add white linear gradient to the bottom of the scrollable div and it should always be at the bottom of a div. I am adding it using position fixed and it works on all browsers except IE >= 9.I need it for all browsers include IE>=9. It should looks like this - http://prntscr.com/ne3rfe

Here is that div's css code

 .perfect-scrollbar::before {
  content: "";
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: #7db9e8;
  background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
  background: -webkit-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, .8) 101%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0);
} 

Answer 1

You can do this using the :before or :after css selector on the parent div/container:

Option 1:

body {
  margin: unset;
}

.container {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-family: calibri;
  overflow-y: auto;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.container:before {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
  height: 50%;
  width: 100%;
}

<div class="container">
  <div>item1 - test</div>
  <div>item2 - test</div>
  <div>item3 - test</div>
  <div>item4 - test</div>
  <div>item5 - test</div>
</div>

https://codepen.io/anon/pen/KYRvqz

Option 2: (works with scrolling)

body {
  margin: unset;
}

.containerwrapper {
  border: 3px solid black;
  width: 500px;
  height: 100px;
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  font-size: 30px;
  font-family: calibri;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.containerwrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

<div class="containerwrapper">
  <div class="container">
    <div>item1 - test</div>
    <div>item2 - test</div>
    <div>item3 - test</div>
    <div>item4 - test</div>
    <div>item5 - test</div>
  </div>
</div>

What I've done here is, I've made two wrappers for the text and I gave the .contentwrapper, pointer-events: none; so that you can scroll, click, hover, etc through the .contentwrapper.

This will give the fading effect to the scrollbar as well, to fix that just change this:

.containerwrapper:before {
  width: 100%;
}

to:

.containerwrapper:before {
  width: calc(100% - 17px); // 17px is the width for the default scrollbar
}

https://codepen.io/anon/pen/gyzGGM?editors=1100

Option 3 (works without absolute positioning):

See kmoser's answer.

Hope this helps!