同时设置scrollLeft和scrollTop

Question

有没有办法同时设置div的scrollLeft和scrollTop？在Chrome,Safari和Opera中,它可以通过顺序设置它们,但在Firefox(早于4)和IE(甚至在IE9!中)设置其中一个会导致重排导致丑陋的故障,因为页面将首先向左移动然后向下移动,像楼梯一样.

我看到那个窗口有一个名为scrollTo(x,y)的方法,是否有正常div的等价物？

或者,是否可以更改浏览器的行为,以便仅在更改滚动时不会触发重排.我找到的一个消息来源说这只会发生,如果我在div上注册的onscroll-event但我没有任何因此不能成为问题.

Answer 1

我刚刚遇到同样的问题.我发现动画建议并不好(跳跃,迟滞,最终更糟),但随附的jQuery插件至少稍微好一些.对我来说,它所需的开销并不值得获得微小的收益.

在我的情况下,我有一个可滚动的div,里面有一个大图像.该图像越大,回流越差.通过在设置滚动属性之前立即隐藏div,然后立即再次显示div,我能够彻底改善这种情况.这允许IE在设置第一个属性后忽略重新呈现内容,而是等待元素再次"可见"(在它们都被设置之后).

在任何主流浏览器的当前版本中似乎没有任何闪烁(这是我首先关注的).在Firefox 4,Opera 11,Chrome 10,IE 8,IE8兼容性和Safari 5中进行了测试.

在jQuery中:

var my_pane = $('#my_scroll_pane');
my_pane.css( 'visibility', 'hidden' );
my_pane.scrollTop( 100 ).scrollLeft( 100 );
my_pane.css( 'visibility', 'visible' );

常规''JavaScript:

var scroll_pane = document.getElementById('my_scroll_pane');
scroll_pane.style.visibility = 'hidden';
scroll_pane.scrollTop = 100;
scroll_pane.scrollLeft = 100;
scroll_pane.style.visibility = 'visible';

更新:这在FF3.6中大致闪烁.如果任何人有任何不涉及浏览器嗅探的想法,那么欢迎任何输入.

Answer 2

您不应该使用scrollLeft 和scrollTop，您应该使用.animate() 设置scrollLeft 和scrollTop。

.animate({
    .scrollLeft: x,
    .scrollTop: y
})

还有几个从http://plugins.jquery.com/project/ScrollTo构建的插件来简化该过程。