title: Always scroll a div element and not page itself
body: <p>I have a page layout with an inner <code>&lt;div id="content"&gt;</code> element which contains the important stuff on the page. The important part about the design is:</p>
  
  <pre><code>#content {
    height: 300px;
    width: 500px;
    overflow: scroll;
  }
  </code></pre>
  
  <p>Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <code>&lt;div&gt;</code>, even when the mouse is not hovering the element (arrow keys should also work)?</p>
  
  <p>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 <code>&lt;div&gt;</code>.</p>
  
  <p>The only thing that changes is that the inner <code>&lt;div&gt;</code> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).</p>
  
  <p>Is this possible to achieve somehow?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>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.)</p>
  
  <p>The first image is how the page looks when opened.</p>
  
  <p>Now, the mouse sits in the indicated position and scrolls and what should happen is that</p>
  
  <ul>
  <li>First the inner div scrolls its content (Fig. 2)</li>
  <li>The inner div has finished scrolling (Fig. 3)</li>
  <li>The body element scrolls so that the div itself gets moved. (Fig. 4)</li>
  </ul>
  
  <p>Hope it is a bit clearer now.</p>
  
  <p><img src="https://i.stack.imgur.com/Owuu0.png" alt="Scroll concept"> (Image thanks to gomockingbird.com)</p>