javascript 同时设置 scrollLeft 和 scrollTop
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4311954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set scrollLeft and scrollTop simultaneously
提问by vaxthus
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.
有没有办法同时设置一个div的scrollLeft和scrollTop？在 Chrome、Safari 和 Opera 中，它可以通过按顺序设置它们立即工作，但在 Firefox（4 岁以上）和 IE（甚至在 IE9 中！）中设置其中之一会导致回流，从而导致丑陋的故障，因为页面将首先向左移动然后向下移动，就像一个楼梯运动。
I see that window has a method called scrollTo(x,y), is there any equivalent for normal divs?
我看到该窗口有一个名为 scrollTo(x,y) 的方法，是否有与普通 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.
或者，是否可以更改浏览器的行为，以便仅更改滚动就不会触发回流。我发现的一个消息来源说，只有当我在 div 上注册了 onscroll-event 时才会发生这种情况，但我没有，所以这不是问题。
回答by Slobaum
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.
刚才我遇到了同样的问题。我发现动画建议不好（跳跃、滞后，最终更糟），但随附的 jQuery 插件至少稍微好一点。对我来说，它所需的开销并不值得微小的收益。
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).
在我的情况下，我有一个可滚动的 div，里面有一个大图像。该图像越大，回流越差。通过在设置滚动属性之前立即隐藏 div，然后立即再次显示它，我能够极大地改善这种情况。这允许 IE 在设置第一个属性后忽略重新渲染内容，而是等到元素再次“可见”（在它们都设置之后）。
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.
在任何主要浏览器的任何当前版本中似乎都没有任何闪烁（这是我最关心的问题）。在 Firefox 4、Opera 11、Chrome 10、IE 8、IE8 兼容性和 Safari 5 中测试。
In jQuery:
在 jQuery 中：
var my_pane = $('#my_scroll_pane');
my_pane.css( 'visibility', 'hidden' );
my_pane.scrollTop( 100 ).scrollLeft( 100 );
my_pane.css( 'visibility', 'visible' );
Regular ole' JavaScript:
常规 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: This does flicker pretty roughly in FF3.6. If anybody has any ideas that don't involve browser sniffing, any input would be welcome.
更新：这在 FF3.6 中确实大致闪烁。如果有人有任何不涉及浏览器嗅探的想法，欢迎任何输入。
回答by S16
You should not be using scrollLeft and scrollTop, you should be setting the scrollLeft and scrollTop using .animate().
你不应该使用scrollLeft 和scrollTop，你应该使用.animate() 设置scrollLeft 和scrollTop。
.animate({
.scrollLeft: x,
.scrollTop: y
})
There are also several plugins built from http://plugins.jquery.com/project/ScrollToto simplify the process.
还有几个从http://plugins.jquery.com/project/ScrollTo构建的插件来简化这个过程。
回答by Brad Wilkie
I would imagine that an animation would be the best method for this (most JavaScript frameworks will do it), but you could also try this:
我想动画将是最好的方法（大多数 JavaScript 框架都会这样做），但你也可以试试这个：
setTimeout("verticalScrollFunction", 1);
setTimeout("horizontalScrollfunction", 1);
回答by kikoqiu
Use absolute positioning or minus margin rather than scrolling.
使用绝对定位或负边距而不是滚动。
