Always scroll a div element and not page itself

Question

I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?

Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.

The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).

Is this possible to achieve somehow?

Edit

I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)

The first image is how the page looks when opened.

Now, the mouse sits in the indicated position and scrolls and what should happen is that

• First the inner div scrolls its content (Fig. 2)
• The inner div has finished scrolling (Fig. 3)
• The body element scrolls so that the div itself gets moved. (Fig. 4)

Hope it is a bit clearer now.

(Image thanks to gomockingbird.com)

Answer 1

I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).