title: Anchor hidden by overflow moves into view on focus
body: <p>I have a simple scroller (similar to the tag scroller at the top to Google images), which uses jquery/javascript.</p>
  
  <pre><code>&lt;div class="chip-scroller widget"&gt;
      &lt;a class="chip-scroller_nav chip-scroller_nav--prev"&gt;
          &lt;span class="md-icon"&gt;arrow_back_ios&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a class="chip-scroller_chip"&gt;anchor&lt;/a&gt;
          &lt;/li&gt;
          &lt;!-- more items here --&gt;
      &lt;/ul&gt;
      &lt;a class="chip-scroller_nav chip-scroller_nav--next"&gt;
          &lt;span class="md-icon"&gt;arrow_back_ios&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The UL (list) has <code>overflow-x: hidden</code> set, so depending on the screen width and the number of items in the list, some items will be out of view, either to the left or the right of the visible area.</p>
  
  <p>In the example below, 2 are hidden to the left, 3 are visible and 1 hidden to the right.</p>
  
  <pre><code>(hidden) (hidden) [visible visible visible] (hidden)
  </code></pre>
  
  <p>The list is positioned using javascript, and in the main navigated using the prev/next navigation buttons at each side.</p>
  
  <p>The issue I have is that any of the items can be focused, whether they are visible or not, and focus means that they're immediately brought into view.</p>
  
  <p>However, the scroller doesn't realise things have changed and it breaks my design. For instance the nav buttons may still show when there is nothing more to scroll in a particular direction.</p>
  
  <p>The first thing I tried was to use <strong>e.preventDefault()</strong> to try and stop any default browser action, but it still bring the item into view. I'm using the on "focus" to capture the event:</p>
  
  <pre><code>$("body").on("focus", ".chip-scroller_chip", moveFocus);
  </code></pre>
  
  <p>This seemingly has no effect.</p>
  
  <p>I could tag non-visible anchors with <strong>tabindex=-1</strong> but I don't want to stop the focus event happening, just regain control back from the browser.</p>
  
  <p>Any ideas would be great.</p>