jQuery.scrollLeft() cuando la dirección es rtl - valores diferentes en diferentes navegadores

Question

La propiedad scrollLeft de un div parece devolver diferentes valores en diferentes navegadores cuando la dirección del cuerpo es rtl.

Un ejemplo se puede ver aquí - http://jsfiddle.net/auVLZ/2/

body { direction: rtl; } 
div.Container { border: 5px solid #F00; width: 500px; height: 400px; overflow: auto; }  
div.Content { background-color: #00F; width: 900px; height: 380px; }​ 

<div id="divContainer" class="Container"> 
    <div class="Content"></div> 
</div> 
<br /> 
<input id="showScrollLeft" type="button" value="Show ScrollLeft" />​ 

$(document).ready(function() 
{ 
    $("#showScrollLeft").click(function(e) 
    { 
     alert($("div.Container").scrollLeft()); 
    }); 
});​ 

Chrome - el valor inicial es 400, y cuando se mueve la barra de desplazamiento a la izquierda es 0.

IE8 - 0 y 400.

Firefox - 0 y -400.

¿Qué está causando esta diferencia y cómo se puede manejar?

Editar: tenga en cuenta que esto está sucediendo con el scrollLetter "regular" también - document.getElementById("divContainer").scrollLeft devuelve los mismos resultados.

Answer 1

Aunque tenía la esperanza de evitar que, terminé usando la detección del navegador:

function GetScrollLeft(elem) 
{ 
    var scrollLeft = elem.scrollLeft(); 
    if ($("body").css("direction").toLowerCase() == "rtl") 
    { 
     // Absolute value - gets IE and FF to return the same values 
     var scrollLeft = Math.abs(scrollLeft); 

     // Get Chrome and Safari to return the same value as well 
     if ($.browser.webkit) 
     { 
      scrollLeft = elem[0].scrollWidth - elem[0].clientWidth - scrollLeft; 
     } 
    } 
    return scrollLeft; 
} 

Answer 2

Incompatibilidades del navegador. Trate this