web-dev-qa-db-fra.com

Comment obtenir une valeur de défilement de document maximale

Je crée un plugin et je dois obtenir une valeur scrollTop maximale du document. La valeur scrollTop maximale est 2001, mais $(document).height() renvoie 2668 et $('body')[0].scrollHeight me donne undefined.

Comment obtenir 2001 via javascript/jquery?!

javascriptjqueryscrolltop
14
hjuster

Le code dans vos commentaires devrait fonctionner:

$(document).height() - $(window).height()

Voici un exemple qui alerte lorsque vous faites défiler jusqu'à la position de défilement maximale: http://jsfiddle.net/DWn7Z/

30
Timm

Voici une réponse que j'ai écrite https://stackoverflow.com/a/48246003/7668448 , il s'agit d'un polyfill pour scrollTopMax qui est une propriété native pour les objets Element. (seulement mozilla). Regardez la réponse, vous pouvez vraiment l'aimer. 

Ci-dessous, un extrait rapide. La réponse dans le lien est plus riche (assurez-vous de regarder).

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

exemple d'utilisation:

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

Si vous voulez "deviner" la valeur maximum de scrolltop, vous devriez peut-être comparer la hauteur du document et la hauteur de la fenêtre (taille de votre fenêtre).

/**
 * Return a viewport object (width and height)
 */
function viewport()
{
    var e = window, a = 'inner';
    if (!('innerWidth' in window))
    {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

// Retrieve the height of the document, including padding, margin and border
var documentHeight = $(document).outerheight(true);
var viewPortData = viewport();

var maxScrollTop = documentHeight - viewPortData.height;

Bien sûr, dans votre plugin, vous devez également ajouter un écouteur à l'événement resize et recalculer le maximum scrollTop.

1
MatRt

En Javascript vanille je fais ceci: 

getScrollTopMax = function () {
  var ref;
  return (ref = document.scrollingElement.scrollTopMax) != null
      ? ref
      : (document.scrollingElement.scrollHeight - document.documentElement.clientHeight);
};

Cela retourne le scrollTopMax non standard de Gecko s'il existe, sinon le calcule. J'utilise document.scrollingElement ici, qui n'existe que sur certains navigateurs, mais c'est facile à polyfill .

1
tremby