在RTL模式下获取可滚动DIV的视口的更好方法是什么？

Question

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

在正常情况下,我会使用以下属性:(scrollLeft,scrollTop,clientWidth,clientHeight)

使用这些数字我可以准确地确定可滚动DOM元素的视口的哪个部分当前可见,我使用此信息异步加载在水平或垂直滚动​​到内容时按需对用户可见的内容.当DIV的内容很大时,由于加载了太多的DOM元素,这将避免令人尴尬的浏览器崩溃错误.

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

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

此简单可滚动元素上scrollLeft属性的行为在一个浏览器与下一个浏览器之间不一致.我尝试过的3个主要浏览器都表现不同.

1. FF-latest scrollLeft从0开始,向左滚动时变为负数
2. IE 9 scrollLeft从0开始,向左滚动时变为正数
3. Chrome-latest scrollLeft以较高的数字开始,向左滚动时为0

我希望避免像if(ie){...}else if(ff){...}else if (chrome){...}这样的代码会很糟糕,并且从长远来看,如果浏览器改变行为,则无法维护.

有没有更好的方法来确切地确定DIV的哪个部分目前可见？

也许除了scrollLeft之外还有一些其他可靠的DOM属性？

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

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

小提琴示例(下面复制的代码)

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; }

JS

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

Answer 1

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

使用这个插件你可以scrollLeft用你自己的可预测版本替换jQuery的函数,如下所示:

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/

此外,这个lib也可能是有趣的.

Answer 2

你可以试试这个: -

         var initialScrollLeft = $('#box').scrollLeft(), negativeToZero, startFromZero;
            if(initialScrollLeft === 0){
                startFromZero = true; 
            } else if(initialScrollLeft < 0){
                negativeToZero = true;
            } 
            var box = $('#box').scroll(function(){
                if(startFromZero){
                    if(box.scrollLeft()>0){
                        $('#scrollLeft').text(- (box.scrollLeft()));
                    }else {
                        $('#scrollLeft').text(box.scrollLeft()); 
                    }
                } else if(negativeToZero){
                    $('#scrollLeft').text(box.scrollLeft()+(box[0].scrollWidth - box[0].clientWidth));  
                } else{
                    $('#scrollLeft').text(box.scrollLeft()-(box[0].scrollWidth - box[0].clientWidth));  
                }

            });