6

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
  • 419
  • 3
  • 10
  • 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

2 Answers2

10

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
  • 380
  • 3
  • 17
  • 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
  • 1
    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
2

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
  • 7,449
  • 2
  • 20
  • 36