当方向为rtl时,jQuery.sollLeft()-不同浏览器中的值不同
jQuery.scrollLeft() when direction is rtl - different values in different browsers
当正文方向为rtl时,div的scrollLeft属性在不同的浏览器中似乎返回不同的值。
这里可以看到一个例子——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-初始值为400,向左移动滚动条时为0。
IE8-0和400。
Firefox-0和-400。
造成这种差异的原因是什么?如何处理?
编辑:请注意,"常规"scrollLeft也会发生这种情况-document.getElementById("divContainer").scrollLeft
返回相同的结果。
虽然我希望避免这种情况,但我最终使用了浏览器检测:
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;
}
浏览器不兼容。试试这个
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 有时数据是't显示在浏览器中
- 使图像在单击时展开到不大于浏览器
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- 不同浏览器中的空白字符正则表达式行为
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何临时暂停浏览器渲染,然后恢复整个页面
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 禁用(而不是隐藏)浏览器滚动条
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 是否可以在浏览器中使用纯JavaScript保存音频流
- jQuery检测浏览器是否支持Zoom
- 当方向为rtl时,jQuery.sollLeft()-不同浏览器中的值不同