On our site we have a "News and Information" section at the top of our landing page. Right now it looks like this:
I'd like to change this to look something like the image below, but I'm having a hard time figuring out how to do this, or if it's even possible?
I am using bootstrap CSS as much as possible, but I don't see anything like this in their documentation.
Any thoughts or ideas would be GREATLY appreciated!

1 Year
Discussion Span
Last Post by zachattack05


Thanks for the reply!

I don't necessarily want the scrollbar control itself to "fade". The scrollbar can always be visible, I was talking more on the lines of having the content itself "fade" at the bottom of the div tag. Like this:


There's a quite simple "workarround" for this. Just put a div on the bottom to act like an "fader".

Take a look on a simple example: https://jsfiddle.net/alemonteiro/ffko2g45/1/

The background on the fader div could be just an rgba(255, 255, 255, 0.5), but I tought an actual gradient would look better.

Anyway, you can change the background to improve it's look.

Edited by AleMonteiro


Instead to hard code an empty div tag at the bottom for the fade effect, you could also use a pseudo element (:before or :after) for your CSS gradient.

.scroll-div {
    position: relative;
    height: 500px;
    overflow: auto;

.scroll-div::after {
    content: " ";
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)

Edited by gentlemedia

Votes + Comments
Better yet =)
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.