Comment obtenir la valeur maximale de scrollLeft?

AFAIK vous devez calculer vous-même la valeur maximale de défilement, c'est la différence entre la largeur du parent/conteneur et la largeur de l'enfant/contenu.

Un exemple sur la façon de le faire avec jQuery:

HTML:

<div id="container">
    <div id="content">
        Very long text or images or whatever you need
    </div>
</div>

CSS:

#container {
    overflow:   scroll;
    width:      200px;
}
#content {
    width:      400px;
}

JS:

var maxScroll = $("#content").width() - $("#container").width();
// maxScroll would be 200 in this example

dans votre cas fenêtre est le parent/conteneur et document l'enfant/du contenu.

voici un JSFiddle avec cet exemple: http://jsfiddle.net/yP3wW/

la solution Simple est

var maxScrollLeft = $(document).width() - $(window).width();

tout d'abord il y a une propriété native qui est implémentée dans mozilla et seulement mozilla scrollLeftMax (scrollTopMax). regardez ici:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax

Ici polyfill j'ai écrit qui fera de cette propriété disponible pour IE8+ et tous les autres navigateurs. Il suffit de l'ajouter en haut de votre fichier js ou du code.

voici le code de polyfill aller:

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

utiliser l'exemple:

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

Le support ici dépendent defineProperties() assistance. qui est IE8+ (pour IE8 la méthode est supportée seulement pour les éléments DOM qui est le cas pour nos polyfill utilisation et méthodes).

consultez ici la liste complète des navigateurs pris en charge: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#compatNote_1

surtout que va suffire.

Si non, vous pouvez ajouter la séparation des fonctions directement. et vous obtenez un soutien pour IE6+ et tous les autres navigateurs. (maintenant, il dépend de l'opérateur d'appui. qui se trouvent être IE6+)

Voici un exemple j'ai choisi d'ajouter un " i " à la fin du nom. scrollLeftMaxi() et scrollTopMaxi()

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

utiliser l'exemple:

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

le code ci-dessus créer les propriétés de l'élément prototype et attribuer le fonctions que nous avons définies. Lorsqu'il est appelé scrollLeftMaxi(). La chaîne prototype est traversée, jusqu'à ce qu'elle arrive à Element.prototype. Où il trouvera la propriété. Sachez que suivre la chaîne du prototype. Et comment les propriétés sont vérifiées. Si vous avez deux propriétés du même nom à un endroit différent de la chaîne. Un comportement inattendu est à prévoir. C'est pourquoi un nouveau nom scrollLeftMaxi est adapté. (si j'ai gardé le même que le mozilla natif, le Mozilla natif ne sera pas remplacé, et ils sont à deux endroits différents dans la chaîne, et le natif préséance. et le natif n'est pas de type de fonction. Un attribut qui ont un getter derrière elle, comme nous l'avons fait avec le polyfill ci-dessus, si je l'appelle comme une fonction. Une erreur se déclenchera, en disant que ce n'est pas une fonction. et donc sans changer le nom nous aurons ce problème avec mozilla. C'était pour un exemple).

Regardez ici comment getter fonctionne si vous aimez : https://www.hongkiat.com/blog/getters-setters-javascript/

voici un test de violon, il montre que nous obtenons le même résultat que la propriété native dans mozilla (assurez-vous de tester dans mozilla)

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



// here we will test

var container = document.getElementById('container');

// here a comparison between the native of mozilla and this one 

console.log("scrollLeftMaxi = " + container.scrollLeftMaxi());
console.log("scrollLeftMax = " + container.scrollLeftMax);

#container {
  height: 500px;
  width: 700px;
  overflow: auto;
  border: solid 1px blue;
}

#inner {
  height: 2000px;
  width: 1500px;
  background: #928ae6;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="container">
      <div id="inner"></div>
    </div>

  </body>

</html>

Que diriez-vous d'utiliser cela avec jquery:

var max = $('#element')[0].scrollLeftMax; // when using the polyfill
var max =  $('#element')[0].scrollLeftMaxi(); // when using the other alternative more support IE6+

Vous pouvez utiliser $(document).width() pour obtenir la totalité de la largeur de votre document, et $(window).width() pour obtenir la largeur de la fenêtre/fenêtre d'affichage.

http://api.jquery.com/width/

Jquery (>1.9.1): La valeur maximale scrollLeft peut être est:

$('#elemID').prop("scrollWidth") - $('#elemID').width();

je pense que vous pouvez utiliser quelque chose comme ceci:

this.children().width()*(this.children().length+1)-this.width()-10;

La ligne de code précédente va obtenir la largeur de l'un des enfants et de multiplier ce chiffre par le nombre de chilren, enfin, vous devez soustraire la largeur de l'élément moins un offteset

var scrollContainer = $('.b-partners .b-partners__inner');
var maxScrollLeft = $(scrollContainer)[0].scrollWidth - $(scrollContainer).width();
console.log(maxScrollLeft);