¿Cómo puedo obtener el contenido completo de un div con jQuery?

Estoy tratando de crear mis propias barras de desplazamiento. He probado la mayoría de los plugins de jquery scrollbar y ninguno de ellos parece funcionar para mí, así que decidí crear el mío. Tengo un área de desbordamiento con contenido desplazable. Puedo hacer que la barra de desplazamiento funcione si puedo averiguar la altura del área de contenido desplazable. He intentado .scrollHeight () y el navegador ni siquiera lo reconoce. El área de desbordamiento tiene una posición fija.

scrollHeight es una propiedad de un objeto DOM , no una función:

Altura de la vista de desplazamiento de un elemento; incluye el relleno del elemento pero no su margen.

Dado este:

 
pancakes

Esto produce 200:

 $('#x')[0].scrollHeight 

Por ejemplo: http://jsfiddle.net/ambiguous/u69kQ/2/ (ejecutar con la consola de JavaScript abierta).

Si puede ayudarlo, NO USE .scrollHeight .

.scrollHeight no produce el mismo tipo de resultados en diferentes navegadores en ciertas circunstancias (más prominente mientras se desplaza).

Por ejemplo:

 

Si lo haces

console.log ($ (‘# outer’). scrollHeight);

obtendrás 900px en Chrome, Firefox y Opera. Eso es genial.

Pero , si adjunta un evento wheelevent / wheel a #outer, cuando lo desplace, Chrome le dará un valor constante de 900px (correcto) pero FireFox y Opera cambiarán sus valores a medida que se desplaza hacia abajo (incorrecto).

Una forma muy simple de hacer esto es como eso (un poco de trampa, de verdad). (Este ejemplo funciona al agregar dinámicamente contenido a #outer también):

 $('#outer').css("height", "auto"); var outerContentsHeight = $('#outer').height(); $('#outer').css("height", "350px"); console.log(outerContentsHeight); //Should get 900px in these 3 browsers 

La razón por la que selecciono estos tres navegadores es porque los tres pueden estar en desacuerdo sobre el valor de .scrollHeight en ciertas circunstancias. Me encontré con este problema haciendo mis propios scrollpanes. Espero que esto ayude a alguien.

También podemos usar –

 $('#x').prop('scrollHeight')  $('#x').prop('scrollWidth')  

Element.scrollHeight es una propiedad, no una función, como se indica aquí . Como se indica aquí , la propiedad scrollHeight solo se admite después de IE8. Si necesita que funcione antes, establezca temporalmente el overflow y la height CSS en auto , lo que hará que el div tome la altura máxima que necesita. Luego, obtenga la altura y cambie las propiedades a las que tenían antes.

Puedes obtenerlo con .outerHeight() .

A veces, devolverá 0 . Para obtener los mejores resultados, puede llamarlo en el evento listo de su div .

Para estar seguro, no debe establecer la altura del div en x . Puede mantener su altura auto para que el contenido se llene correctamente con la altura correcta.

 $('#x').ready( function(){ // alerts the height in pixels alert($('#x').outerHeight()); }) 

Puedes encontrar una publicación detallada aquí .

  1. El uso de scrollHeight no solo es scrollHeight , sino que no funciona cuando el contenedor tiene una altura codificada (lo cual es probable en la mayoría de los casos, ya que desea obtener la altura del contenido sin hacer container.height() )
  2. La solución @ shazboticus-s-shazbot es buena cuando puedes jugar con la altura del contenedor temporalmente / tener una altura fija.
  3. Una solución alternativa sería:
 $('#outer') // Get children in array format, as we'll be reducing them into a single number .contents().toArray() // Filter out text and comment nodes, only allowing tags .filter(el => el.nodeType === 1) // Sum up all the children individual heights .reduce((accumulator, el) => $(el).outerHeight(true) + accumulator, 0);