元素滑塊從0開始到底部（負）而不是在Firefox中從0到頂部

Question

所有瀏覽器中的元素滑塊從0到頂部（例如： 0 to 500 ）從頁面方向left to right ，當頁面方向right to left ，滑塊從頂部開始到0（例如： 500 to 0 ）。
當頁面right to left從0到底（從0 to -500 ）負數開始時， firefox是唯一不同的瀏覽器。

 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> 

也是jsfiddle 。

如何使firefox像所有瀏覽器一樣處理元素滑塊？

Answer 1

現在這是我不知道的事情，很酷。 甚至MDN明確表示Firefox'是正確的行為 。 但是，如果所有其他瀏覽器都表現得那樣，那就沒有什么不同了，特別是對於像scrollLeft這樣的舊規范。

無論如何，有一種方法可以讓Firefox工作像其他的人，和涉及（而創的，是公平的）技巧。 Firefox還支持非標准屬性scrollLeftMax ，它可以派上用場，因為它可以節省我們檢查元素的計算樣式：如果一個元素是水平可滾動的，但scrollLeftMax是零，那么它是從右到左需要調整：

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;
    }
});

如果需要或完整性，也應該注意scroll方法：

var originalScroll = Element.prototype.scroll;

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

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

關鍵是要了解何時應用它。 我認為沒有一種方法可以在不向DOM添加虛擬元素的情況下預先檢查這一點。