title: IE keyboard scrolling inside HTML5 semantic elements
body: <p>I'm developing an internal web app for my organization, written in PHP. Unfortunately, HTML and CSS are not among my specialties, so I have to teach myself a lot of the presentation side as I go.</p>
  
  <p>I want to implement a basic scrolling box with some content in it. For the most part I've gotten it working. However I can't use the <em>keyboard</em> with IE (9, 10, 11) to scroll inside an HTML5 semantic element (<code>section</code>, <code>article</code>, <code>nav</code>, etc). A regular <code>div</code> works fine. Firefox and Chrome have no problems regardless of the element.</p>
  
  <p>To be clear, the scroll bar is visible, active, and functions properly when directly manipulated (i.e. clicked or dragged). The mouse scroll-wheel also scrolls just fine. Only the keyboard arrows seems to be an issue. I could just shrug and abandon the HTML5 semantic tags entirely (having no functional use for them beyond readability), but I'd rather figure out what's wrong.</p>
  
  <p>Is there something I'm doing incorrectly, or have I hit an IE bug that requires a workaround? I've tried searching/experimenting for hours and can't seem to find a solution.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.scrollable {
      height: 75px;
      width: 150px;
      border: solid black 1px;
      overflow-x: hidden;
      overflow-y: auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="scrollable"&gt;
      IE &lt;em&gt;can not&lt;/em&gt; keyboard scroll this.&lt;br /&gt;
      &lt;ul&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
          &lt;li&gt;Item 5&lt;/li&gt;
          &lt;li&gt;Item 6&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;div class="scrollable"&gt;
      IE &lt;em&gt;can&lt;/em&gt; keyboard scroll this.&lt;br /&gt;
      &lt;ul&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
          &lt;li&gt;Item 5&lt;/li&gt;
          &lt;li&gt;Item 6&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>