A panel with a scroll bar that fades?

[zachattack05]

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!

[gentlemedia]

To get a scrollbar you give that section (probably a div tag) in your CSS a fixed height and the property, overflow: auto;
But to get a scrollbar that fade-in on mouseover for example, you will need to resort to a custom scrollbar such as http://manos.malihu.gr/jquery-custom-content-scroller/

[zachattack05]

gentlemedia,

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:

[AleMonteiro]

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.

[gentlemedia]

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%)
}

[zachattack05]

Thanks for the help!