[Solved] overflow – unable to scroll from anywhere and scrollbar stopping early

[claire2013]

I’m learning how to code and give myself challenges to complete.

Currently, I’m trying to have text disappear behind a transparent header when scrolling down the page. The only solution I’ve found so far, is to give the content an overflow: auto and add top, bottom, and paddings to contain it in a box.

This solution does not work so well. The page will not scroll if the mouse is not in the “content with overflow” area. Also, the scrollbar is restricted only to the content area; so it does not scroll to the very top of the page.

What are some other approaches to achieve this effect.

Here’s a jsfiddle to get an idea of what I’m talking about. http://jsfiddle.net/claireC/6bAW5/4/

[shaneisme]

I’m trying to have text disappear behind a transparent header when scrolling down the page

You should try messing with positions. If you give your header a position fixed, it will stay where it is no matter what.

Chris put together a video to give you the basics: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

Try that out, if you get stuck again let us know.

[claire2013]

The header is fixed. I have no problems with the position of the header. If you try scrolling while the mouse is on the header, the content will not scroll.

I would like the main content/text to scroll with the mouse anywhere on the page.

[shaneisme]

I forked your fiddle on to codepen and made some changes.

http://codepen.io/drainpip/pen/vEFuK (fiddle messed up)

The problem why it wasn’t scrolling was because you were using overflow. Overflow is designed to be its own thing inside a page.

[__]

If you’re okay with the header being “not really” transparent, then you can simply give it the same background color (or image, in this case) as the rest of the webpage. Get rid of overflow, and you’re done.

[claire2013]

I thought of giving the header an ing as well, but thought it might be too big of a file size to load both images.

[__]

thought it might be too big of a file size to load both images.

Just one image. : )

[claire2013]

I am seeing two images. One for the body of the page and another for the header.

[Atelierbram]

They are one and the same image, … like the effect … My fork of shaneisme’s fork

[shaneisme]

My example was simply to get your mind moving in the right direction, as I tend to do. Since you said you’re new, I’ll elaborate a little bit on why what @Atelierbram did was awesome (Aside from giving you exactly what you originally wanted!).

You could technically get away with making the page with two images, at first glance that might actually make sense from a stitching together a static image into a website kind of way. But what that causes is two trips to the server and back to the client instead of one. You might also think that this is a trivial thing, but imagine if your page was viewed a few thousand times… tens of thousands…

The browser looks at the code, hey I need this image, server replies back here’s your image, browser doesn’t even thank the server (he’s an ass) and starts to render – oh wait, I need another image, server replies back (thanklessly) here’s your image and browser renders… etc…

In our new example, the browser looks at the code and gets the image, then sees the same image needed again so it pulls it from its session cache and renders it again in fraction of the time AND without the server needing to find the image and send it over the net again.

With a little CSS imagination you can solve problems like this, and the returns compound as the complexity of your sites increases. Thinking about these little things can help save precious milliseconds, and we should all know a millisecond is a lifetime in our game :)

[claire2013]

@Atelierbram @shaneisme ooooooooooooooh! Lightbulb finally goes off in head. I was thinking way too hard about this situation. I have no idea why I didn’t think of that. It’s so simple!!!

@shaneisme Thanks for the explanation. I do need more CSS imagination.

[Author]

Posts