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

红色数字是随时滚动的值，FireFox和Chrome中的值完全相同，但当我将方向更改为rtl时，事情会发生变化，{ {3}}，

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

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

当然我可以检测浏览器并执行不同的计算，例如See it Online，但我不想这样做，因为这样我必须检查每个浏览器（ FF，Chrome，Safari ...）和 IE （6,7,8,9,10,11 ...）

Answer 1

当方向为rtl时，firefox从零滚动到负数，而chrome从正数字滚动到零。网站在首次加载时进行初始化时，应从这些数字中检查滚动面。

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

识别后。现在您可以检测scrollLeft左右滚动的位置。

Answer 2

我为同一个问题here

提供了解决方案

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

rtl方向的jQuery scrollLeft - FireFox＆amp;中的不同值铬

2 个答案: