javascript - 元素 slider 从 0 开始到底部(负)而不是 0 到 Firefox 中的顶部

Question

所有浏览器中的元素 slider 从 0 开始向上(例如:0 到 500)，即页面方向为 从左到右 时，当页面的方向是从右到左 slider 从顶部开始到 0(例如:500 到 0)。
firefox 是唯一在页面方向为从右到左 时从 0 开始到底部(例如:0 到 -500) 负数。

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 像所有浏览器一样处理元素 slider ？

Answer 1

现在这是我不知道的东西，酷。甚至 MDN 也明确表示 Firefox' 是 correct behavior .但是，如果所有其他浏览器的行为都是这样，那么与众不同就没有意义，尤其是对于像 scrollLeft 这样的旧规范。

无论如何，是一种让 Firefox 像其他 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 添加虚拟元素的情况下先发制人地检查这一点。