javascript - 同时设置 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，然后立即再次显示它，我能够极大地改善这种情况。这允许 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' );

常规 ole' 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 中相当粗略地闪烁。如果有人有任何不涉及浏览器嗅探的想法，欢迎任何意见。