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' );

常规''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';

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

Answer 2

你不应该使用scrollLeft和scrollTop，你应该使用.animate（）设置scrollLeft和scrollTop。

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

还有一些http://plugins.jquery.com/project/ScrollTo构建的插件可以简化这个过程。

Answer 3

我认为动画是最好的方法（大多数JavaScript框架会这样做），但你也可以试试这个：

setTimeout("verticalScrollFunction", 1);
setTimeout("horizontalScrollfunction", 1);

Answer 4

使用绝对定位或减去边距而不是滚动。

同时设置scrollLeft和scrollTop

4 个答案: