81
Comment obtenir la valeur de position de défilement d'un document?Comment obtenir la position de défilement d'un document?
A
Répondre
45
$(document).height() //returns window height
$(document).scrollTop() //returns scroll position from top of document
3
Quelque chose comme cela devrait résoudre votre problème:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
alert($.getDocHeight());
Ps: appeler cette fonction à chaque fois que vous en avez besoin, l'alerte est à des fins de test ..
+0
Pour une raison quelconque, cette fonction ne fonctionne pas correctement pour moi; l'utiliser à l'intérieur d'un iframe. La hauteur réelle de est de 256px, cette fonction me donne 337px et je n'ai aucune idée d'où ça vient. P.S. J'utilise Chrome 18. – jurchiks
+0
@jurchiks: Avez-vous un lien vers l'emplacement de cette iframe, pour que je puisse y jeter un coup d'œil? – Zuul
+0
https://www.blade.dateks.lv/salidzinat?ids=58664,43586. Cliquez sur l'un des points d'interrogation. J'ai réussi à en fixer le maximum, mais deux d'entre eux (et il y en a plus en fonction des éléments comparés) ont toujours une marge étrange et mystérieuse ~ 20px en bas. Il disparaît quand je redimensionne la fenêtre, parce que je l'ai fait changer les dimensions de la fenêtre sur le redimensionnement de la fenêtre. – jurchiks
6
document.getElementById("elementID").scrollHeight
$("elementID").scrollHeight
+0
alors quel est l'élément ID de votre objet document? ... peut-être que vous vouliez dire "document.body.scrollHeight"? – BrainSlugs83
+2
$ ('# gallery'). ScrollHeight me donne undefined // # gallery is id de mon débordement: auto element, ne fonctionne pas –
176
Voilà comment pour obtenir le scrollHeight d'un élément obtenu à l'aide d'un sélecteur jQuery:
$(selector)[0].scrollHeight
Si selector est l'ID de l'élément (par ex. elemId), il est garanti que l'élément indexé 0 du tableau sera l'élément que vous souhaitez sélectionner, et scrollHeight sera correct.
+12
Attention, selon la base de connaissances Mozilla, il n'est pas supporté par les versions IE inférieures à le 8.0 https://developer.mozilla.org/en/DOM/element.scrollHeight –
+0
Exactement comme @EmanueleDelGrande dit: regardez ici: http://www.quirksmode.org/dom/w3c_cssom.html - pour IE <8 le DOM scrollHeight est implémenté mais incorrectement. Pour moi cela fonctionne dans IE 6, 7 sur netrenderer mais peut ne pas fonctionner dans tous les cas. – TMS
+2
D'accord avec @Tomas, utilisez l'abstraction de jQuery pour une meilleure gestion des bizarreries croisées. Par exemple, ce qui précède peut être modifié en $ (sélecteur) .offset(). Top –
45
Si vous utilisez Jquery 1.6 ou supérieur, utilisez prop pour accéder à la valeur.
$(document).prop('scrollHeight')
Les versions précédentes utilisées pour obtenir la valeur de attr mais pas post 1.6.
+12
Cela retourne "indéfini" pour moi avec jQuery 1.7.1, tout comme $ (document) .attr ("scrollHeight"). – Michael
+5
C'est parce qu'il manque l'élément body. Il doit être $ (document.body) .prop ('scrollHeight') - à ce stade, vous pouvez aussi utiliser document.body.scrollHeight; – goddogsrunning
3
Pour obtenir la hauteur défilante réelle des zones défilées par la barre de défilement de la fenêtre, j'ai utilisé $('body').prop('scrollHeight'). Cela semble être la solution de travail la plus simple, mais je n'ai pas beaucoup vérifié la compatibilité. Emanuele Del Grande note sur une autre solution que cela ne fonctionnera probablement pas pour IE ci-dessous 8.
La plupart des autres solutions fonctionnent bien pour les éléments défilants, mais cela fonctionne pour toute la fenêtre. Notamment, j'ai eu le même problème que Michael pour la solution d'Ankit, à savoir que $(document).prop('scrollHeight') renvoie undefined.
6
Il utilise les éléments DOM HTML, mais pas le sélecteur jQuery. Il peut être utilisé comme:
var height = document.body.scrollHeight;
-1
Essayez ceci:
var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;
0
Vous pouvez essayer par exemple, ce code a mis la barre de défilement en bas pour toutes les balises DIV
Rappelez-vous: jQuery peut accepter une fonction à la place de la valeur en argument. "this" est l'objet traité par jQuery, la fonction retourne la propriété scrollHeight du DIV actuel "this" et le fait pour tous les DIV du document.
$("div").scrollTop(function(){return this.scrollHeight})
j'étais thinkig de la même façon, mais pourquoi console.log ($ (this) .scrollTop()) = 1187 console.log ($ (this) .height()) = 1 762 ça diffère tellement? Pour 575px si j'ai fait défiler vers le bas de la page. Où sont passés ces 575px? Barre de défilement ne peut pas être 576px :) – Somebody
Baaah encore une fois ma faute. Je regardais scrollbar avec fenêtre firebug ouverte. Ofc il peut être 576px maintenant. :) Merci je suppose que le sujet est fermé. – Somebody
-1 - C'est très bien, mais ne répond pas à la question, qui concernait 'scrollHeight'. –