同时设置scrollLeft和scrollTop [英] Set scrollLeft and scrollTop simultaneously

问题描述

有没有任何方法来同时设置scrollLeft和scrollTop的div？在Chrome，Safari和Opera中，它可以顺序设置，但在Firefox（4以上）和IE（即使在IE9！）设置其中之一会导致回流，导致丑陋的毛刺，因为页面将首先向左移动，像一个楼梯运动。

Is there any way to set scrollLeft and scrollTop of a div simultaneously? In Chrome, Safari and Opera it works right away by setting them sequentially but in Firefox(older than 4) and IE(even in IE9!) setting one of them causes reflow resulting in ugly glitches because the page will first move left then down, like a stair-motion.

我看到窗口有一个名为scrollTo（x，y）的方法，有正常的div吗？

I see that window has a method called scrollTo(x,y), is there any equivalent for normal divs?

或者，是否可以改变浏览器的行为，所以回流不会触发只是改变滚动。一个来源，我发现这只会发生，如果我有onscroll事件注册的div，但我没有任何，所以不会是这个问题。

Or, is it possible to change the behavior of the browser so the reflow won't trigger on just changing the scroll. One source i found said this would only happen if i have onscroll-event registered on the div but i don't have any so that can't be the problem.

推荐答案

刚才我也有同样的问题。我发现动画建议不是很好（jumpy，laggy，最终更糟糕），但提供的jQuery插件与它一起至少在一定程度上更好。对我来说，它需要的开销不是真的值得微小的增益。

I was having this same issue just moments ago. I found that the animate suggestion was not good (jumpy, laggy, ultimately worse), but the supplied jQuery plugin that came with it was at least marginally better. For me, the overhead it required was not really worth the tiny gain.

在我的情况下，我有一个可滚动的div与一个大图像里面。该图像越大，回流越差。我能够通过在设置滚动属性之前立即隐藏div，然后在之后立即再次显示，从而大幅改善情况。此允许IE在设置第一个属性后忽略重新呈现内容，而是等到元素再次可见（在它们都设置后）。

In my situation, I have a scrollable div with one large image inside. The larger this image is, the worse the reflow. I was able to quite drastically improve the situation by hiding the div immediately before setting the scroll properties, then showing it again immediately afterward. This allows IE to ignore re-rendering the contents after the first property is set, and instead wait until the element is "visible" again (after they are both set).

在任何主要浏览器的任何当前版本似乎没有任何闪烁（这是我的第一个问题）。在Firefox 4，Opera 11，Chrome 10，IE 8，IE8兼容性和Safari 5中测试。

There doesn't seem to be any flicker in any current version of any major browser (which was my first concern). Tested in Firefox 4, Opera 11, Chrome 10, IE 8, IE8 Compatibility, and 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：

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

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

UPDATE: This does flicker pretty roughly in FF3.6. If anybody has any ideas that don't involve browser sniffing, any input would be welcome.

这篇关于同时设置scrollLeft和scrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！