包裹在另一个div中时div滚动到顶部答案

【问题标题】：Div scrolling to top when wrapped in another div包裹在另一个div中时div滚动到顶部
【发布时间】：2016-09-29 15:01:17
【问题描述】：

我有一个可滚动的 div。向下滚动然后将 div 包装到另一个 div 会导致滚动位置重置为顶部。关于如何保留滚动位置的任何想法？

HTML：

<div class="box"><p>Lorem ipsum...</p></div>
<button onclick="wrapme()">wrap me!</button>

JS：

function wrapme(){
    $(document.body).wrapInner($("<div>", { class: "wrapper" }));
}

CSS：

.box {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 1px solid #000;
}

.wrapper {
    border: 1px solid blue;
}

【问题讨论】：

【解决方案1】：

您必须监控并保存您的文本“scrollTop”。
试试这个：http://codepen.io/g1un/pen/rrzAVk?editors=1111

function wrapme(){
  var top = $('.box').scrollTop();
    $(document.body).wrapInner($("<div>", { class: "wrapper" }));
  $('.box').scrollTop(top);
}

【讨论】：

谢谢@g1un，我知道这一点，但我想知道是否有另一种方法可以在不检查元素的情况下做到这一点。我很好奇这件事的发生。如果将父元素添加到元素的唯一方法是克隆它，为什么还要保留引用？
@Ricardo 我没听懂。你说的参考是什么？
如果保存对元素的引用（示例中的框），然后将其包装在 div 中，则引用不会更改。还是同一个 jQuery 元素但是一个新的 DOM 元素？