Scrolling an overflow:auto Element With The Window's Scrollbar?

HTML & CSS
1

Basically what I’m trying to achieve is similar to this (CSS code [URL=“http://www.csszengarden.com/202/202.css”]here), but I’d like to avoid having absolutely positioned elements. Instead I have a background image with a DIV on top of that containing the content. Off the top of my head I don’t know of any solutions. A CSS solution would be ideal, but I’d settle for jQuery or just raw JavaScript if anyone can think of a way.

2

Hi WalterCoots. Welcome to SitePoint. :slight_smile:

This would be easy to do if you are willing to have a standard scroll bar along the right side of the div containing the content. You would just set a height on that div and then use overflow: auto.

3

You have to actually grasp what was done in the Zen Garden demo ( which is pretty clever).

  1. The “elements” aren’t AP’ed. They are fixed.
  2. They form a frame around the content so there is no actual overflow.

If you are concerned about adding non semantic mark up to make the “extra divs”, you can get around this easily by using :before and :after pseudo classes to create the extra “divs”. Some legacy IE support can be easily added after that using expressions.

4

Thanks Ralph! Yeah, I know overflow:auto; will add a scrollbar to the side of a DIV. But I don’t want it there, I want it on the window. Basically my opinion is that having a scrollbar over a photo like that (e.g. at the side of the movie theater screen) would detract from the visual design.

5

In that case, stick with the layout method used in the Zen Garden example you linked to. It seems to work well.

6

The major difference between the CSS Zen Garden layout and what I’m trying to do is that I don’t want the visible content area to scale with the browser window. It’s going to be a fixed height. It might help to see the staging site at http://michaeldeagonia.waltercoots.com.

In order for the CSS Zen Garden technique to work, there has to be 1) something overlapping the content and 2) one of those overlapping elements absolutely positioned to the bottom of the window. Using that technique I could make the bottom portion of the paper absolutely positioned to the bottom of the window, but the paper would look either too short or too long unless the user is in an ideal “sweet spot”. This is why I’m wondering if there’s some other way to achieve it than the way CSS Zen Garden did it. I suppose I could also use a div filled with the wood grain texture background as the bottom absolutely positioned div, and ensure it’s the correct height using JavaScript…