Установите scrollLeft и scrollTop одновременно

Есть ли способ установить scrollLeft и scrollTop div одновременно? В Chrome, Safari и Opera он работает сразу, устанавливая их последовательно, но в Firefox (старше 4) и IE (даже в IE9!), Если один из них вызывает переплавку, что приводит к уродливым сбоям, потому что страница сначала перемещается влево и вниз, как движение лестницы.

Я вижу, что у окна есть метод scrollTo (x, y), есть ли эквивалент для нормальных divs?

Или, возможно ли изменить поведение браузера, так что переключение не будет срабатывать при простом изменении прокрутки. Один источник, который я нашел, сказал, что это произойдет, только если у меня есть onscroll-событие, зарегистрированное в div, но у меня его нет, так что это не проблема.

Ответы

Ответ 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. Если у кого-то есть идеи, которые не связаны с обнюхиванием браузеров, любой вход будет приветствоваться.

Ответ 2

Вам не следует использовать scrollLeft и scrollTop, вы должны установить scrollLeft и scrollTop с помощью .animate().

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

Существует также несколько плагинов, построенных из http://plugins.jquery.com/project/ScrollTo, чтобы упростить процесс.

Ответ 3

Я бы предположил, что анимация будет лучшим способом для этого (большинство фреймворков JavaScript это сделает), но вы также можете попробовать следующее:

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

Ответ 4

Используйте абсолютное позиционирование или минус маркер, а не прокрутку.