Jerky JQuery прокрутки движения в Firefox

Question

У меня есть 2 элемента div на фиксированной позиции на моей странице, идея заключается в том, что их содержимое прокручивается при прокрутке страницы.Однако при использовании Firefox, когда на странице много других объектов DOM, движение (особенно вертикальное) очень резкое.Производительность в Chrome и IE7 / 8 хорошая.Код показан ниже -

Если кто-нибудь может указать, как это можно оптимизировать или оптимизировать, я был бы очень признателен!

Я связываю свое событие прокрутки окна следующим образом;

$(document).ready(function()
{
   $(window).scroll(scrollMover);
});

Где функция прокрутки определяется как

function scrollMover()
{        
    var offSets = getScrollXY();
    document.getElementByID('divA').scrollLeft = offSets[0];
    document.getElementByID('divB').scrollTop = offSets[1];

}

и

function getScrollXY()
{
var XOffset = 0, YOffset = 0;
if (typeof (window.pageYOffset) == 'number')
{
    //Netscape compliant
    YOffset = window.pageYOffset;
    XOffset = window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
    //DOM compliant
    YOffset = document.body.scrollTop;
    XOffset = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
    //IE6 standards compliant mode
    YOffset = document.documentElement.scrollTop;
    XOffset = document.documentElement.scrollLeft;
}
return [XOffset, YOffset];
}

Вот пример Живой пример к сожалению это немного бесполезно, так как на странице нет полос прокрутки!;)

Редактировать: вот Обновленный пример , дополненный полосами прокрутки!любезно предоставлено фуджи .

Answer 1

Здравствуйте, у меня была точно такая же проблема в Firefox с div, расположенным с правой стороны!Я немного поискал и обнаружил, что это связано с рендерингом позиции в Firefox: исправлено при использовании функции прокрутки.Я считаю, что jQuery меняет его на абсолютную позицию, которая вызывает этот странный сбой.Мое решение состояло в том, чтобы изменить divs на позицию: absolute.Вот пример кода:

 function scrollingDiv() {
  var scrolledY = (document.all ? document.scrollTop : window.pageYOffset);
  var newHeight = Math.floor(scrolledY);
  var totalPageHeight = $(document).height();
  if (newHeight < 150) { newHeight = 150; } //This is if you want the div placed below an element and is the offset found in the css
  else if (newHeight > totalPageHeight) { newHeight = totalPageHeight}
  $("#right-div").css({ 'top' : newHeight + 'px'});
}

Запуск функции: $(window).scroll(function() { scrollingDiv() });

Пример CSS:

#right-div {
z-index: -99; /*set to this so it appears under other elements not necessary */
position: absolute;
top: 150px; /*offset from top*/
right: 0;
width: 300px; /*width of div*/
height: 100%; /*if you want it to fill up the entire page*/
overflow: visible; }

Надеюсь, это поможет людям, сталкивающимся с той же ошибкой вFirefox.