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);
}
The linear-gradient () function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
For a scrollable bar, use the x and y-axis. Set the overflow-x: hidden; and overflow-y: auto; to automatically hide the horizontal scrollbar and show a vertical scrollbar. Let’s see an example, where the <div> is vertically scrollable. Place the <h2> tag. Write some content in it.
More "Try it Yourself" examples below. The linear-gradient () function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among.
Definition and Usage. The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With