javascript – 在RTL模式下更好地获取可滚动DIV的视口？

我需要一个更好的方法来计算一个可滚动的div的视口.

一般情况下,我将使用以下属性：(scrollLeft,scrollTop,clientWidth,clientHeight)

使用这些数字,我可以准确地确定可滚动的DOM元素的视口当前可见的部分,当使用这些信息以水平或垂直的方式滚动到内容时,可以异步地加载用户可见的东西.当DIV的内容庞大时,这将避免由于加载了太多DOM元素而导致浏览器崩溃的尴尬.

我的组件已经工作了一段时间,没有任何问题,这个构建我们正在引入RTL支持.现在一切都因为浏览器的不一致而被抛弃.

为了演示,我创建了一个简单的例子,它将在JSFiddle中输出一个可滚动元素的scrollLeft属性.

这个简单的可滚动元素上的scrollLeft属性的行为在一个浏览器到下一个浏览器之间是不一致的.我尝试过的3种主要浏览器的行为都不一样.

> FF-latest scrollLeft从0开始,向左滚动时为负
> IE 9 scrollLeft从0开始,向左滚动时为正
> Chrome最新的scrollLeft从较高的数字开始,向左滚动时变为0

我想避免使用if(ie){…} else if(ff){…} else if(chrome){…}这样的代码是可怕的,并且在长期情况下不可维护浏览器改变行为.

有没有更好的方法来确定目前DIV的哪一部分是可见的？

也许还有一些其他可靠的DOM属性,而不是scrollLeft？

也许有一个jQuery插件可以为我做,请记住哪个浏览器版本是？

也许有一种技术可以用来确定运行时的哪些情况,而不依赖于一些不可靠的浏览器检测(即userAgent)

Fiddle Example(代码下面复制)

HTML

<div id="Box"><div id="content">scroll me</div></div>
<div id="output">Scroll Left: <span id="scrollLeft"></span></div>

CSS

#Box {
    width: 100px; height: 100px;
    overflow: auto;
    direction: rtl;
}
#content { width: 300px; height: 300px; }

function updateScroll() {
    $('#scrollLeft').text(Box.scrollLeft());
}
var Box = $('#Box').scroll(updateScroll);
updateScroll();

解决方法

这是一个不使用浏览器检测的jQuery插件： https://github.com/othree/jquery.rtl-scroll-type

使用这个插件可以用你自己的可预测版本替换jQuery的scrollLeft函数,像这样：

var origScrollLeft = jQuery.fn.scrollLeft;
jQuery.fn.scrollLeft = function(i) {
    var value = origScrollLeft.apply(this,arguments);

    if (i === undefined) {
        switch(jQuery.support.rtlScrollType) {
            case "negative":
                return value + this[0].scrollWidth - this[0].clientWidth;
            case "reverse":
                return this[0].scrollWidth - value - this[0].clientWidth;
        }
    }

    return value;
};

我没有包含用于设置滚动偏移的代码,但是你会得到这个想法.

这是小提琴：http://jsfiddle.net/scA63/

此外,this lib也可能是感兴趣的.

javascript – 在RTL模式下更好地获取可滚动DIV的视口？

解决方法

猜你在找的JavaScript相关文章