title: Div scrolling to top when wrapped in another div
body: <p>I have a scrollable div. Scrolling down and then wrapping the div into another div causes the scroll position to be reset to top. Any ideas on how to preserve the scroll position?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/div&gt;
  &lt;button onclick="wrapme()"&gt;wrap me!&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function wrapme(){
      $(document.body).wrapInner($("&lt;div&gt;", { class: "wrapper" }));
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box {
      width: 400px;
      height: 200px;
      overflow: auto;
      border: 1px solid #000;
  }
  
  .wrapper {
      border: 1px solid blue;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/gyd3r70k/5/" rel="nofollow">https://jsfiddle.net/gyd3r70k/5/</a></p>