web-dev-qa-db-fra.com

Comment puis-je obtenir la valeur maximale de scrollLeft?

D'accord, j'utilise jQuery et j'obtiens actuellement la valeur maximale de la barre de défilement:

var $body = $('body');
$body.scrollLeft(99999); // will give me the max value since I've overshot
var max_value = $body.scrollLeft(); // returns 300
$('body').scrollLeft(0);

Quand j'essaye ceci: $body[0].scrollWidth je viens d'obtenir la largeur réelle du contenu - 1580

Je pense qu'il doit y avoir un meilleur moyen que j'oublie.

EDIT Pour clarifier, j’ai aussi essayé $(window).width() et $(document).width() qui m’a donné 1280 et 1580, respectivement.

javascriptwidthscrollbar
41
Dave Stein

Vous pouvez calculer la valeur maximale de element.scrollLeft avec:

var maxScrollLeft = element.scrollWidth - element.clientWidth;

Notez qu'il peut y avoir des problèmes particuliers au navigateur que je ne sache pas.

70
Angel Yordanov

Autant que je sache, vous devez calculer vous-même la valeur de défilement maximale. Il s'agit de la différence entre la largeur du parent/conteneur et la largeur de l'enfant/contenu.

Un exemple sur la façon de faire cela 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, window est le parent/conteneur et document l'enfant/le contenu.

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

4
Larzan

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

Voici un polyfill que j’ai écrit et qui rendra cette propriété disponible pour IE8 +, et tous les autres navigateurs. Ajoutez-le simplement en haut de votre fichier ou code js.

Voici le code 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);

exemple d'utilisation:

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

Le support ici dépend du support defineProperties(). qui est IE8 + (pour IE8, la méthode est supportée uniquement par les éléments DOM, ce qui est le cas pour notre utilisation et nos méthodes polyfill).

Recherchez 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 cela suffira.

Sinon, vous pouvez ajouter fonctions séparées directement. et vous obtenez un support pour IE6 + et tous les autres navigateurs. (à présent, cela dépendra du support de l’opérateur. IE6 +)

Voici un exemple que j’ai choisi d’ajouter simplement 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);

exemple d'utilisation:

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

Le code ci-dessus crée les propriétés du prototype d’élément et attribue les fonctions que nous avons définies. Lorsque appelé scrollLeftMaxi(). La chaîne de prototypes est traversée jusqu'à atteindre Element.prototype. Où il trouvera la propriété. Sachez-le en suivant la chaîne de prototypes. 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 juste à prévoir. C'est pourquoi un nouveau nom, scrollLeftMaxi, convient. (Si j'ai gardé le même nom que celui natif de mozilla, celui-ci ne sera pas remplacé, et ils sont à deux endroits différents de la chaîne, et le natif a la priorité. avoir un getter derrière, tout comme nous l'avons fait avec le polyfill ci-dessus, si je l'appelle comme une fonction. Une erreur se déclenchera, disant que ce n'est pas une fonction. à titre d'exemple).

Regardez ici comment fonctionne getter 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 de 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>

Qu'en est-il de l'utiliser avec jquery:

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

La solution simple est

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

Vous pouvez utiliser $(document).width() pour obtenir la largeur totale de votre document et $(window).width() pour obtenir la largeur de la fenêtre/fenêtre.

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

0
Tobias Cohen

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

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