¿Cómo obtengo la posición de desplazamiento de un documento?

82

¿Cómo obtener el valor de la posición de desplazamiento de un documento?

jquery scroll

— Alguien
fuente

46

$(document).height() //returns window height

$(document).scrollTop() //returns scroll position from top of document

— Bob Gregor
fuente

Estaba pensando de la misma manera, pero ¿por qué console.log ($ (this) .scrollTop ()) = 1187 console.log ($ (this) .height ()) = 1762 difiere tanto? Para 575px si me he desplazado hasta la parte inferior de la página. ¿Dónde se han ido esos 575px? La barra de desplazamiento no puede ser de 576 px :)

— Alguien

3

Baaah de nuevo es mi culpa. Estaba mirando la barra de desplazamiento con la ventana Firebug abierta. Ofc ahora puede ser de 576px. :) Gracias, supongo que el tema está cerrado.

— Alguien

101

-1 - Eso es muy bonito, pero no responde a la pregunta, de que se trataba scrollHeight.

— Wayne

8

Correcto, esta es una pregunta de jquery. Pero ni $ (document) .height () ni $ (document) .scrollTop () dan la información deseada. La solicitud era para scrollHeight. El valor scrollHeight es la altura total disponible para un elemento (si es desplazable, ese valor puede ser mayor que su altura). scrollTop devuelve qué tan lejos de la parte superior estaría el elemento. Tampoco responda cuál es la altura total disponible. Consulte help.dottoro.com/ljbixkkn.php para obtener información sobre scrollHeight

— teynon

4

Esto se marca como la respuesta porque responde a la pregunta que pretendía el autor de la pregunta, que era sobre la altura a la que se desplaza actualmente el documento ... ergo "scrollHeight". Es una coincidencia que este nombre se use en un contexto diferente.

— Chase Sandmann

177

A continuación, se explica cómo obtener el valor scrollHeightde un elemento obtenido mediante un selector de jQuery:

$(selector)[0].scrollHeight

Si selector es el id del elemento (por ejemplo elemId), se garantiza que el elemento indexado en 0 de la matriz será el elemento que desea seleccionar y scrollHeightserá correcto.

— Demwis
fuente

12

Tenga cuidado, de acuerdo con la base de conocimientos de Mozilla, no es compatible con versiones de IE inferiores a 8.0 developer.mozilla.org/en/DOM/element.scrollHeight

— yodabar

2

De acuerdo con @Tomas, use la abstracción de jQuery para un mejor manejo de las peculiaridades del navegador cruzado. Por ejemplo, lo anterior se puede modificar a $ (selector) .offset (). Arriba

— Bob Gregor

3

Um, no $ (document) .offset () devuelve nulo, y .offset () no tiene nada que ver con la posición de las barras de desplazamiento del navegador (.offset () devuelve coordenadas de elementos relativos al documento). Estoy de acuerdo en que deberíamos usar jQuery cuando sea posible, pero aparentemente, como no hay soporte de navegador cruzado para esto, jQuery no proporciona una abstracción para ello.

— BrainSlugs83

2

También puede hacer $ (selector) .get (0) .scrollHeight

— Ally

1

@Dmitri Zaitsev .scrollHeight es una propiedad del nodo DOM, no una propiedad jQuery.

— Zemljoradnik

45

Si está utilizando Jquery 1.6 o superior, use prop para acceder al valor.

$(document).prop('scrollHeight')

Las versiones anteriores solían obtener el valor de attr pero no la publicación 1.6.

— Ankit
fuente

12

Esto me devuelve "undefined" con jQuery 1.7.1, al igual que $ (document) .attr ("scrollHeight").

— Michael

5

Eso es porque le falta el elemento del cuerpo. Tiene que ser $ (document.body) .prop ('scrollHeight'), en cuyo momento también puede usar document.body.scrollHeight;

— goddogsrunning

6

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

— Sachin R
fuente

entonces, ¿cuál es el ID de elemento de su objeto de documento? ... quizás quiso decir "document.body.scrollHeight"?

— BrainSlugs83

2

$ ('# galería'). scrollHeight me da indefinido // # la galería es la identificación de mi desbordamiento: elemento automático, no funciona

— Anmol Saraf

6

Utiliza HTML DOM Elements, pero no jQuery selector. Se puede usar como:

var height = document.body.scrollHeight;

— agua
fuente

3

Algo como esto debería resolver tu problema:

$.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: Llame a esa función cada vez que la necesite, la alerta es para fines de prueba.

— Zuul
fuente

Por alguna razón, esta función no me funciona correctamente; usándolo dentro de un iframe. La altura real de <html> es 256px, esta función me da 337px y no tengo idea de dónde viene. PD: estoy usando Chrome 18.

— jurchiks

@jurchiks: ¿Tiene un enlace a dónde está ese iframe, para que lo vea?

— Zuul

blade.dateks.lv/salidzinat?ids=58664,43586 . Haga clic en cualquiera de los signos de interrogación. Me las arreglé para arreglar la mayor parte, pero dos de ellos (y hay más dependiendo de los elementos que se comparan) todavía tienen un margen extraño y misterioso de ~ 20px en la parte inferior. Sin embargo, desaparece cuando cambio el tamaño de la ventana, porque hice que cambiara las dimensiones de la ventana emergente al cambiar el tamaño de la ventana.

— jurchiks

3

Para obtener la altura de desplazamiento real de las áreas desplazadas por la barra de desplazamiento de la ventana, utilicé $('body').prop('scrollHeight'). Esta parece ser la solución de trabajo más simple, pero no he verificado ampliamente la compatibilidad. Emanuele Del Grande señala en otra solución que esto probablemente no funcionará para IE por debajo de 8.

La mayoría de las otras soluciones funcionan bien para elementos desplazables, pero esto funciona para toda la ventana. En particular, tuve el mismo problema que Michael para la solución de Ankit, es decir, que $(document).prop('scrollHeight')está regresando undefined.

— acjay
fuente

1

Prueba esto:

var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;

— Dmitry Komin
fuente

0

Puede probar esto, por ejemplo, este código coloca la barra de desplazamiento en la parte inferior para todas las etiquetas DIV

Recuerde: jQuery puede aceptar una función en lugar del valor como argumento. "this" es el objeto tratado por jQuery, la función devuelve la propiedad scrollHeight del DIV actual "this" y lo hace para todos los DIV en el documento.

$("div").scrollTop(function(){return this.scrollHeight})

— Steve
fuente