同时设置 scrollLeft 和 scrollTop

Question

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.

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

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.

Answer 1

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.

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).

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.

In 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:

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.

Answer 2

You should not be using scrollLeft and scrollTop, you should be setting the scrollLeft and scrollTop using .animate().

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

There are also several plugins built from http://plugins.jquery.com/project/ScrollTo to simplify the process.

Answer 3

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:

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

Answer 4

You might be able to use Object.assign :

const {scrollLeft, scrollTop} = computeGoodScrollPosition(myDiv);
Object.assign(myDiv, {
  scrollLeft,
  scrollTop
});

Answer 5

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