rtl方向的jQuery scrollLeft - FireFox和Chrome中的不同值答案

【问题标题】：jQuery scrollLeft in rtl direction - Different value in FireFox & Chromertl方向的jQuery scrollLeft - FireFox和Chrome中的不同值
【发布时间】：2014-08-20 12:35:27
【问题描述】：

我有以下简单的 HTML ：

<div id='d1'>
    <div id='d2'>
        <table id='d3'>
            <tr>
                <td>T1</td>
                <td>T2</td>
                <td>T3</td>
                <td>T4</td>
                <td>T5</td>
                <td>T6</td>
                <td>T7</td>
            </tr>
        </table>
    </div>
</div>
<br />
<span id='s1'></span>

CSS：

    #d1{
        width: 400px;
        overflow: auto;
        direction: ltr;
    }
    #d2{
        width: 800px;
    }
    #d3{
        border:1px solid #ccc;
    }
    #d3 tr td {
        width:120px;
        height: 200px;
    }
    #s1 {
        font-size: 25px;
        color:#f00;
    }

JS / jQuery：

    var scroll;
    jQuery("#d1").on("scroll", function() {
        scroll = jQuery("#d1").scrollLeft();
        jQuery("#s1").html(scroll);
    });
    var scroll = jQuery("#d1").scrollLeft();
    jQuery("#s1").html(scroll);

See it Online

红色数字是任意时刻滚动的值，在FireFox和Chrome中的值完全相同，但是当我将方向更改为rtl时，情况发生了变化，See it Online ,

在 FireFox 中，第一个滚动值为 0，当向左滚动时，该值变为 -400
但在 Chrome 中，从 400 开始，向左滚动时，值变为 0

问题是当我试图检测滚动条是在第一个还是最后时，我必须如何处理这种差异？（正如您所注意到的，Chrome 的第一个是 400，FireFox 的第一个是 0 和 ...）

当然我可以检测浏览器并进行不同的计算，例如StackOverflow Question，但我不想那样做，因为这样我必须检查每个浏览器（FF、Chrome、 Safari ...) 和 IE (6,7,8,9,10,11 ...)

【问题讨论】：

Better way to get the viewport of a scrollable DIV in RTL mode? 的可能副本

标签： javascript jquery google-chrome firefox scroll

【解决方案1】：

当方向为 rtl 时，firefox 从零滚动到负数，chrome 从正数滚动到零。当网站在第一次加载时初始化时，您应该从这些数字中检查滚动侧。

scrollNegative = elm.scrollLeft > 0 ? false : true;

识别之后。现在你可以通过scrollLeft 来检测你应该在哪里滚动，向右或向左。

【讨论】：

【解决方案2】：

我对同一个问题给出了解决方案here

它使用特征检测，而不是浏览器检测。

【讨论】：