如何滚动分离的对象？

Question

考虑以下jQuery行：

var $s = $('<span><span class="one"><span class="two"></span></span></span>');

$('.one', $s).css('border', 'solid 1px black').scrollLeft(200);
$('.one', $s).css('border', 'solid 1px blue').scrollTop(200);

$(document.body).append($s);

现在我想做一些滚动之前元素附加到DOM（由于视觉要求），但滚动条保持为0. 如何滚动元素之前它附加到DOM？

_{JS小提琴示例：http://jsfiddle.net/KeesCBakker/gQbkw/1/}

Answer 1

1. 使用绝对位置
将元素添加到正文中
2. 将顶部和左侧设置为屏幕外的位置
3. 滚动元素
4. 将其附加到正确的位置并删除绝对定位

哦，还有一件事，而不是使用css设置边框 - 把它放在一个类

中

编辑：关于您对IE的评论，这是一个解决方案http://jsfiddle.net/gQbkw/4/
我使用另一个div作为容器，这是一个简化的解决方案，在IE9和chrome中检查它

Answer 2

错误是由于在将元素添加到文档之前使用元素引起的。为了重新保存它，您需要先将此元素添加到文档中，然后对此元素执行追加操作

var $spans = $('<span><span class="one"><span class="two"></span></span></span>');

$(document.body).append($spans);

$('.one', $spans).css('border', 'solid 1px black').scrollLeft(200);
$('.one', $spans).css('border', 'solid 1px blue').scrollTop(200);

Answer 3

除非将元素附加到DOM，否则无法滚动元素，因为浏览器不知道它的尺寸，是否可以滚动或滚动多少。