javascript - jQuery .wrapAll() 重置嵌套元素的滚动

Question

请看下面的小提琴：

http://jsfiddle.net/ardoramor/UzJqd/

当小提琴加载时，带有类的 DIV.wrapper向下滚动 200px。这包括所有嵌套的.wrapper. DIVs as well. After 5 seconds, trigger.wrapAll() will be executed on the children of.container . The content of the.container class will be wrapped by a new DIV with.wrapAll class. You will notice that the red and blue areas jump and you can now see the topand` 元素。这是由于包装而发生的。

注意：这是一个非常简化的示例。实际上，我现在将知道.wrapperDIV 的内容。此外，可能有多个带有滚动的此类元素。我的问题是容器的孩子是否可以在不重置滚动条的情况下进行包装。

Answer 1

在包装之前保存 scrollTop 并在包装之后恢复。

var st = $( '.wrapper' ).scrollTop();
$( '.container' ).children().wrapAll( '<div class="wrapAll">' );
$('.wrapper').scrollTop(st);

更新小提琴：http: //jsfiddle.net/JR6y8/1/

Answer 2

只需将滚动代码放在 wrapAll 函数之后

$( '.wrapper' ).scrollTop( 200 );

Answer 3

尝试这个：

setTimeout( function () {
        $( '.container' ).children().wrapAll( '<div class="wrapAll">' ).scrollTop($('.container').height());
    }, 5000 );
});