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

Question 1

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

Question 2

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

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

Question 3

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.

Question 4

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.

Question 5

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

Question 6

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

var height = document.body.scrollHeight;

Question 7

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.

Question 8

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.

Question 9

Prueba esto:

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

Question 10

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})

Answer 1

82

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

jquery scroll Alguien
fuente

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

101

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

Wayne

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

2

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

Ally

Answer 13

1

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

Zemljoradnik

Answer 14

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

Answer 15

12

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

Michael

Answer 16

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

Answer 17

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

Answer 18

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

BrainSlugs83

Answer 19

2

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

Anmol Saraf

Answer 20

6

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

var height = document.body.scrollHeight;

agua
fuente

Answer 21

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

Answer 22

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

Answer 23

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

Zuul

Answer 24

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

Answer 25

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.

Answer 26

1

Prueba esto:

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

Dmitry Komin
fuente

Answer 27

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})

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

Respuestas: