rtl方向的jQuery scrollLeft - FireFox&铬 [英] jQuery scrollLeft in rtl direction - Different value in FireFox & Chrome

问题描述

我有以下简单的 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; 
溢出：auto; 
方向：ltr; 
} 
＃d2 {
 width：800px; 
} 
＃d3 {
 border：1px solid #ccc; 
} 
＃d3 tr td {
 width：120px; 
 height：200px; 
} 
＃s1 {
 font-size：25px; 
颜色：＃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）; 
  

在线查看

红色数字是任何时候滚动的值，在我改变方向为 rtl 时，事情发生了变化， 但中的值与FireFox和Chrome完全相同， 在线查看 ，

• 在FireFox中，第一个滚动值是 0 ，当向左滚动时，该值变为 -400 400 开始，当向左滚动时，该值变为 0 >
  

问题是当我尝试检测滚动条是否在第一个时，我该如何处理这种差异还是最终？ （正如你注意到的，Chrome的第一个是400，FireFox的第一个是0和...）

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

解决方案

我给出了相同问题的解决方案此处

它使用功能检测，而不是浏览器检测。

I have following simple 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

the red number is the value of scroll in any moment, the value is exactly the same in FireFox and Chrome, but when I change the direction to rtl, things change, See it Online,

• In FireFox in the first the scroll value is 0 and when scrolling to left, the value changes to -400

• But in Chrome, starts from 400 and when scrolling to left, the value changes to 0

The question is How I must handle this difference when I'm trying to detect if scrollbar is in the first or in the end ? ( As you noticed, Chrome's first is 400, FireFox's first is 0 and ... )

Of course I can detect Browsers and do different calculation, like this StackOverflow Question , But I don't want to do that, because this way I must check every browsers (FF, Chrome,Safari ...) and IE (6,7,8,9,10,11 ...)

解决方案

I gave a solution to the same question here

It uses feature detection, not browser detection.

这篇关于rtl方向的jQuery scrollLeft - FireFox&铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！