Slider element starts from 0 to the bottom (negative), not 0 at the top in firefox
The element slider in all browsers starts from 0 up to the top (ex:) 0 to 500
, which is when the page direction left to right
and when the page direction right to left
, the slider starts from the top to 0 (ex:) 500 to 0
. firefox
is the only browser that differs when the page direction right to left
starts with a negative number from 0 to bottom (ex:) 0 to -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>
How do I get firefox to handle the element slider like all browsers?
source to share
Now that something I didn't know, cool. Even MDN explicitly says Firefox is the correct behavior . But if all other browsers behave like this, there is no point in distinguishing, especially for the old type specification scrollLeft
.
Anyway, there is a way to make Firefox work like the others, and includes a (rather aggressive, to be fair) trick. Firefox also supports a non-standard property scrollLeftMax
that can come in handy because it saves us from checking the computed element: if the element scrolls horizontally but scrollLeftMax
is zero, then it's right to left and needs tweaking:
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 method scroll
should be taken care of and if necessary 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 knowing when to apply it. I don't think there is a way to proactively check this without adding a dummy element to the DOM.
source to share