On our site we have a "News and Information" section at the top of our landing page. Right now it looks like this:
news.PNG
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!
news3.png

Recommended Answers

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

Jump to Post

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; …
Jump to Post

All 5 Replies

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/

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:
5832e2c5b5d674c5e3381f713a77bd4e.png

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.

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%)
}
commented: Better yet =) +10

Thanks for the help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.