Add a fading effect at the bottom of a scroll view - html

Question

I create a scroll view with some text on it. I want to create a fade effect at the bottom of the text. I found a similar question an tried to implement it in my example that you can see on this fiddle. The fade is not fixed on the bottom of the scroll view and the color is not really transparent. Do you have an idea about the problem?
this is my code
.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom: 50px;
z-index: 100;
}
.scrollviewwrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px;
overflow: scroll;
}
.scrollviewwrapper:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
pointer-events: none;
}

Answer 1

You need to change a few things:
Since your current background color is rgba(0,0,0,0.7) ( a dark gray), which translates into the solid color of #4c4c4c (or rgba(76,76,76,1)), you need to use it in your gradient so it blends in.
i also had to make the .overlay element the reference for .scrollviewwrapper's after (by removing the position from .scrollviewwrapper), to prevent the pseudo-element from scrolling together with its parent content. I also had to add box-sizing:border-box to it so it includes padding in its size.
See it working:
document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if(keyCode==38) {
// up arrow
} else if(keyCode==40) {
// down arrow
}
}
.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 190px;
width: 500px;
z-index: 100;
}
.scrollviewwrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px;
overflow: auto;
color: white;
height: 190px;
box-sizing: border-box;
}
.scrollviewwrapper:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: calc(100% - 21px);
height: 40px;
margin-left: -30px;
background-image: linear-gradient(to bottom, rgba(76,76,76,0), rgba(76,76,76,1));
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>
Note I also added a negative left margin to the :after pseudo element and I changed the overflow of .scrollviewwrapper to auto so it only displays a vertical scrollbar, if the contents needs it.

Answer 2

Add the pseudo element to .overlay instead:
document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);
this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');
function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;
if (keyCode == 38) {
// up arrow
} else if (keyCode == 40) {
// down arrow
}
}
.overlay {
position: absolute;
background: rgba(0, 0, 0, 0.7);
height: 200px;
width: 500px;
top: 50px;
left: 20px;
bottom: 50px;
z-index: 100;
}
.overlay::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
pointer-events: none;
}
.scrollviewwrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>