How do I get the max value of scrollLeft? How do I get the max value of scrollLeft? javascript javascript

How do I get the max value of scrollLeft?


javascript width scrollbar

You can calculate the maximum value of element.scrollLeft with:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

Note that there could be some browser specific quirks that I'm not aware of.

javascript width scrollbar

First of all there is a native property that is implemented in mozilla and only mozilla scrollLeftMax (also scrollTopMax). look here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

Here a polyfill i wrote that will make that property available for IE8+, and all the other browsers. Just add it at the top of your js file or code.

Here the polyfill code go:

(function(elmProto){    if ('scrollTopMax' in elmProto) {        return;    }    Object.defineProperties(elmProto, {        'scrollTopMax': {            get: function scrollTopMax() {              return this.scrollHeight - this.clientHeight;            }        },        'scrollLeftMax': {            get: function scrollLeftMax() {              return this.scrollWidth - this.clientWidth;            }        }    });})(Element.prototype);

use example:

var el = document.getElementById('el1');var max = el.scrollLeftMax;

The support here depend on defineProperties() support. which is IE8+ (for IE8 the method is supported for only DOM elements which is the case for our polyfill use and methods).

Look here for the whole list of supported browsers:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1

mostly that will suffice.

If not you can add separate functions directly. and you get a support for IE6+ and all other browsers. (now it will depend on in operator support. which happen to be IE6+)

Here an example i choosed to add just an 'i' to the end for the name. scrollLeftMaxi() and scrollTopMaxi()

(function (elmProto) {    elmProto.scrollTopMaxi = function () {        return this.scrollTop - this.clientHeight;    };    elmProto.scrollLeftMaxi = function () {        return this.scrollLeft - this.clientWidth;    };})(Element.prototype);

use example :

 var element = document.getElementById('el'); var leftMax = element.scrollLeftMaxi(); var topMax = element.scrollTopMaxi(); console.log(leftMax); console.log(topMax);

The code above create the properties the Element prototype and assign the functions we defined. When called scrollLeftMaxi(). The prototype chain get traversed, until it Get to Element.prototype. Where it will find the property. Know that following the prototype chain. And how the properties are checked. If having two properties of same name at different place in the chain. Unexpected behavior is just to be expected. That's why a new name as scrollLeftMaxi is suited. (if i kept the same as the native mozilla one, the native one will not get override, and they are in two different place in the chain, and the native one take precedence. and the native is not of function type. An attribute that have a getter behind it, just like we did with the polyfill above, if i call it as a function. An error will trigger, saying it's not a function. and so without changing the name we will have this problem with mozilla. That was for an example).

Look here how getter works if you like :https://www.hongkiat.com/blog/getters-setters-javascript/

here is a fiddle test, it show that we get the same result as the native property in mozilla (make sure to test within mozilla)

Show code snippet