9

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);
}
Saba Shavidze
  • 604
  • 4
  • 14
  • 1
    Possible duplicate of [How to fade the edge of a div with just CSS?](https://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div-with-just-css) – Matt Apr 19 '19 at 10:49

3 Answers3

11

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!

Tigerrrrr
  • 526
  • 6
  • 24
  • It does not work when scrolling. I want it works dynamicly, i mean when i will scroll it should always be at bottom of div. – Saba Shavidze Apr 19 '19 at 11:22
  • 1
    Updated, Option 2 will work when you scroll. Sorry for the late response it took me a while to come up with the idea for Option 2 and test and make sure it works. – Tigerrrrr Apr 19 '19 at 11:53
  • 2
    Option 2 works great when you can absolutely position the containing div, but that's not always practical on a page where the div needs to stay within the normal document flow. Here's an example that doesn't have to be absolutely positioned: https://codepen.io/km0ser/pen/NWWPXGe. – kmoser Oct 08 '19 at 00:13
  • @kmoser your solution worked for me. I might suggest making it a separate answer: I'd hate for it to disappear if the CodePen link stops working. – Willow Dec 12 '21 at 19:18
  • @Willow Thanks, I've posted it as an answer. – kmoser Dec 13 '21 at 04:40
3

Option 2 posted by @Tigerrrrr works great when you can absolutely position the containing div, but that's not always practical on a page where the div needs to stay within the normal document flow.

Here's an example that doesn't have to be absolutely positioned.

div.main {
  background-color: black;
  color: white;
}

h1 {
  color: yellow;
}

div.songs-wrapper {
  width: 100%;
  position: relative;
}

div.songs-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 15px;
  height: 120px;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 100%
  );
}

div.songs {
  overflow-y: scroll;
  height: 400px;
  display: block;
  scrollbar-width: thin;
  scrollbar-color: #ff2222 #444444;
  padding: 0px 5% 0px 5%;
}

div.songs ul {
  margin: 0;
  padding: 0;
  padding-bottom: 50px; /* So we scroll just past the faded part */
  -webkit-columns: 250px 3;
  -moz-columns: 250px 3;
  columns: 250px 3;
}

div.songs li {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.4rem;
  margin-bottom: 10px;
  list-style-type: none; /* '\2022'; */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<div class="main">

  <h1>Stuff Before</h1>
  <div class="songs-wrapper">
    <div class="songs">
      <ul>
        <li>
          Accentuate the Positive <span>(F)</span>
        </li>
        <li>
          Ain't Misbehavin' <span>(Bb)</span>
        </li>
        <li>
          All of Me <span>(C)</span>
        </li>
        <li>
          All of You <span></span>
        </li>
        <li>
          All or Nothing at All <span>(C)</span>
        </li>
        <li>
          All the Things You Are <span>(Ab)</span>
        </li>
        <li>
          Almost Like Being In Love <span>(Bb)</span>
        </li>
        <li>
          April in Paris <span>(Ab)</span>
        </li>
        <li>
          Autumn Leaves <span>(Em)</span>
        </li>
        <li>
          Be Careful, It's My Heart <span>(F)</span>
        </li>
        <li>
          The Best Things in Life are Free <span>(C)</span>
        </li>
        <li>
          Bewitched <span>(C)</span>
        </li>
        <li>
          Blue Skies <span>(Eb)</span>
        </li>
        <li>
          The Boulevard of Broken Dreams <span></span>
        </li>
        <li>
          But Not For Me <span>(Bb)</span>
        </li>
        <li>
          Bye Bye Blackbird <span>(F)</span>
        </li>
        <li>
          Call Me <span>(G)</span>
        </li>
        <li>
          Candy <span>(F)</span>
        </li>
        <li>
          Cheek to Cheek <span>(Ab)</span>
        </li>
        <li>
          Coquette <span>(C)</span>
        </li>
        <li>
          Cry Me a River <span>(C)</span>
        </li>
        <li>
          Don't Get Around Much Anymore <span>(C)</span>
        </li>
        <li>
          East of the Sun and West of the Moon <span>(G)</span>
        </li>
        <li>
          Embraceable You <span>(F)</span>
        </li>
        <li>
          Ev'ry Time We Say Goodbye <span>(C)</span>
        </li>
        <li>
          Fly Me To The Moon <span>(C)</span>
        </li>
        <li>
          The Frim Fram Sauce <span>(Bb)</span>
        </li>
        <li>
          From This Moment On <span>(Ab)</span>
        </li>
        <li>
          Get Me to the Church on Time <span>(G)</span>
        </li>
        <li>
          The Girl From Ipanema <span>(F)</span>
        </li>
        <li>
          Have You Met Miss Jones? <span>(F)</span>
        </li>
        <li>
          Hello, Young Lovers <span>(C)</span>
        </li>
        <li>
          Honeysuckle Rose <span>(F)</span>
        </li>
        <li>
          How Deep is the Ocean? <span>(C)</span>
        </li>
        <li>
          I Believe in You <span>(G)</span>
        </li>
        <li>
          I Can't Give You Anything But Love <span>(G)</span>
        </li>
        <li>
          I Could Write a Book <span>(Bb)</span>
        </li>
        <li>
          I Love Paris <span>(C)</span>
        </li>
        <li>
          I Wish I Were in Love Again <span>(G)</span>
        </li>
        <li>
          I Wish You Love <span>(Eb)</span>
        </li>
        <li>
          I'll Be Seeing You <span>(Bb)</span>
        </li>
        <li>
          I'll Never Smile Again <span>(C)</span>
        </li>
        <li>
          I'm Beginning to See the Light <span>(G)</span>
        </li>
        <li>
          I'm Gonna Sit Right Down and Write Myself a Letter <span>(C)</span>
        </li>
        <li>
          I've Got My Love to Keep Me Warm <span>(Eb)</span>
        </li>
        <li>
          I've Got the World On a String <span>(C)</span>
        </li>
        <li>
          I've Got You Under My Skin <span>(C)</span>
        </li>
        <li>
          I've Never Been In Love Before <span>(G)</span>
        </li>
        <li>
          If I Didn't Care <span>(Bb)</span>
        </li>
        <li>
          If I Were a Bell <span>(C)</span>
        </li>
        <li>
          In the Wee Small Hours of the Morning <span>(C)</span>
        </li>
        <li>
          Is You Is, Or Is You Ain't My Baby? <span>(Ab)</span>
        </li>
        <li>
          It All Depends on You <span>(G)</span>
        </li>
        <li>
          It Don't Mean a Thing (If It Ain't Got That Swing) <span>(Bb)</span>
        </li>
        <li>
          It Had to be You <span>(Eb)</span>
        </li>
      </ul>
    </div>
  </div>

  <h1>Stuff After</h1>
</div>
kmoser
  • 8,780
  • 3
  • 24
  • 40
1

I was adapting answers from here, but didn't like the gradient color being reset manually instead of "inherited" from background. Once I've found the mask approach and made more experiments and gradient specs reading, I've came up with a simple and flexible solution:

.container {
  height: 5em;
  overflow: auto;

  -webkit-mask-image: linear-gradient(to bottom,
    transparent .5em,
    red 1em calc(100% - 1em),
    transparent calc(100% - .5em));
  mask-image: linear-gradient(to bottom,
    transparent .5em,
    red 1em calc(100% - 1em),
    transparent calc(100% - .5em));
}
<div class="container">
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
  <div class="content">content is here</div>
</div>

It has a drawback, though: note that the scrollbar is also affected by the gradient, so you will probably still want to use :before and :after.

YakovL
  • 7,557
  • 12
  • 62
  • 102