title: Focus on scroll section of html
body: <p>I have a page consisting of three div sections.</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;!--header html goes here--&gt;
  &lt;/div&gt;
  &lt;div id="body" class="page-body"&gt;
  &lt;!--main html goes here--&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
  &lt;!--footer html goes here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css is</p>
  
  <pre><code>body {
      overflow: hidden;
  }
  
  .page-body
  {
      overflow: auto;
  }
  </code></pre>
  
  <p>The problem with this is if user pressed <code>PgDn</code> or <code>down arrow</code> key then the page doesn't scroll down. In order for page to scroll down through keyboard the user has to first click on <code>page-body</code> <code>div</code> section and then the key presses work.</p>
  
  <p>I have tried using <code>autofocus</code> tag on the page-body div or writing <code>document.getElementById('page-body').focus()</code> on load, but nothing seems to work. How can I get keyboard to work as soon as page loads without having to click on the section? I would prefer solution without javascript since my page doesn't really need it, but if I have to I am ok with javascript solution too.</p>