jquery - 如何滚动分离的对象？

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，因为浏览器不知道它的尺寸以及它是否可以滚动或它可以滚动多少。