Edit Question - KnowledgeHub

Title Body

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)

Tags (comma-separated) Cancel