javascript - element slider start from 0 to bottom (negative) instead 0 to top in firefox -

the element slider in browsers starts 0 top (ex: 0 500) that's when direction of page left right, , when direction of page right left slider starts top 0 (ex: 500 0).
firefox browser different when direction of page right left starts 0 bottom (ex: 0 -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 make firefox treats element slider browsers ?

now that's didn't know, cool. mdn explicitly says firefox' correct behavior. if other browser behaves that, there's no point in being different, old spec scrollleft.

anyway, there is way make firefox work other ones, , involves (rather invasive, fair) trick. firefox supports non-standard property scrollleftmax may come in handy, because saves check element's computed style: if element horizontally scrollable, scrollleftmax zero, it's right-to-left , needs 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 taken care of if needed or 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 understanding when apply it. don't think there's way preemptively check without adding dummy element dom.