CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefoxscroll
Alireza Fallah
Alireza Fallah

Reputation: 4607

jQuery scrollLeft in rtl direction - Different value in FireFox & Chrome

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,

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 ...)

Upvotes: 4

Views: 4099

Answers (2)

Amir Forsati
Amir Forsati

Reputation: 5960

When direction is rtl, firefox scrolls from zero to negative numbers and chrome from positive numbers to zero. you should check the scroll side from these numbers when the website is initializing in the first load. 

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

After recognizing it. now you can detect where you should scroll by scrollLeft, right or left.

Upvotes: 4

Lucas Trzesniewski
Lucas Trzesniewski

Reputation: 51330

I gave a solution to the same question here

It uses feature detection, not browser detection.

Upvotes: 2

Related Questions