javascript - jQuery scrollLeft 在 rtl 方向 - FireFox 和 Chrome 中的不同值

Question

我有以下简单的 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

红色数字是任意时刻scroll的值，这个值在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 ...)

Answer 1

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

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

认清后。现在您可以通过 scrollLeft 向右或向左检测应该滚动的位置。