title: Scroll bar jumping on hover
body: <p>Code: <a href="http://jsfiddle.net/qhoc/gutWm/1/" rel="nofollow">http://jsfiddle.net/qhoc/gutWm/1/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;
              &lt;input type="text" value="Search" /&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div {
      position: fixed;
      width: 300px;
      background: gray;
      overflow: none;
      top: 0;
      bottom: 0;
  }
  
  div:hover {
      overflow: auto;
  }
  
  ul {
      border: 1px solid red;
  }
  </code></pre>
  
  <p><strong>Question:</strong> If you scroll the div to bottom and move the mouse out of the div, the whole inner content (red border) will jump instead of stay still. <strong>Why is that and how to fix?</strong></p>
  
  <p>It doesn't make sense to me because there is no horizontal bar and there is nothing (ul) expanding outside the div width.</p>