元素滑块从0开始到底部（负）而不是在Firefox中从0到顶部

Question

The element slider in all browsers starts from 0 up to top (ex: 0 to 500 ) that's when the direction of page is left to right , and when the direction of page is right to left the slider starts from top to 0 (ex: 500 to 0 ).
The firefox is the only browser which is different when the direction of page is right to left starts from 0 to bottom (ex: 0 to -500 ) negative number.

 var box = document.getElementById('box'); var result = document.getElementById('result'); box.onscroll = function() { result.innerHTML = box.scrollLeft; } 

 body { direction: rtl; } #box { width: 500px; height: 250px; margin: 0 auto; overflow-y: hidden; overflow-x: scroll; } #childBox { width: 1000px; height: 250px; background: url('http://images.all-free-download.com/images/graphiclarge/school_symbols_seamless_pattern_311368.jpg') repeat-x; overflow: hidden; } 

 <div id="box"> <div id="childBox"></div> </div> <div id="result"></div> 

Also jsfiddle .

How to make the firefox to treats the element slider like all browsers ?

Answer 1

Now that's something I didn't know, cool. Even the MDN explicitly says that Firefox' is the correct behavior . But if all the other browser behaves like that, there's no point in being different, especially for an old spec like scrollLeft .

Anyway, there is a way to make Firefox work like the other ones, and involves a (rather invasive, to be fair) trick. Firefox also supports the non-standard property scrollLeftMax which may come in handy, because it saves us to check the element's computed style: if an element is horizontally scrollable, but scrollLeftMax is zero, then it's right-to-left and needs to be adjusted:

if (!("scrollLeftMax" in Element.prototype)) return;

var scrollLeftDesc = Object.getOwnPropertyDescriptor(Element.prototype, "scrollLeft");

Object.defineProperty(Element.prototype, "scrollLeft", {
    get: function() {
        var diff = this.scrollWidth - this.clientWidth;

        return scrollLeftDesc.get.call(this) + (this.scrollLeftMax ? 0 : diff);
    },
    set: function(v) {
        var diff = this.scrollWidth - this.clientWidth;

        scrollLeftDesc.set.call(this, v - (this.scrollLeftMax ? 0 : diff));

        return v;
    }
});

The scroll method should be taken care of too if needed or for completeness:

var originalScroll = Element.prototype.scroll;

Element.prototype.scroll = function(x, y) {
    var diff = this.scrollWidth - this.clientWidth;

    originalScroll(x - (this.scrollLeftMax ? 0 : diff), y);
};

The point is understanding when to apply it. I don't think there's a way to preemptively check this without adding a dummy element to the DOM.