The scrollLeft property of a div seems to return different values in different browsers when the body direction is rtl.
An example can be seen here - 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 - the initial value is 400, and when moving the scrollbar to the left it is 0.
IE8 - 0 and 400.
Firefox - 0 and -400.
What is causing this difference and how can it be handled?
Edit: note that this is happening with the "regular" scrollLeft as well - document.getElementById("divContainer").scrollLeft
returns the same results.
The scrollLeft() method sets or returns the horizontal scrollbar position for the selected elements. Tip: When the scrollbar is on the far left side, the position is 0. When used to return the position: This method returns the horizontal position of the scrollbar for the FIRST matched element.
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. Example 1: html.
Although I was hoping to avoid that, I ended up using browser detection:
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With