jquery - page - ¿Cómo obtengo el real.height() de un desbordamiento: oculto o desbordado: scroll div?

min height jquery

Question

Tengo una pregunta sobre cómo obtener una altura div. Soy consciente de .height() y innerHeight() , pero ninguno de ellos hace el trabajo por mí en este caso. El caso es que en este caso tengo un div que se sobrepasa ancho un overflow: scroll y el div tiene una altura fija.

Si utilizo .height() o innerHeight() , ambos me dan la altura del área visible, pero si quiero tener en cuenta el desbordamiento, ¿cómo hago?

Answer 1

Otra posibilidad sería ubicar el html en un elemento no desbordado: elemento oculto ubicado ''fuera'' de la pantalla, como una posición absoluta superior e inferior izquierda a continuación, 5000 píxeles, luego lea esta altura de los elementos. Es feo, pero funciona bien.

Answer 2

Otra solución simple (no muy elegante, pero tampoco demasiado fea) es colocar un div / span interior div / span luego obtener su altura ( $(this).find(''span).height() ).

Aquí hay un ejemplo del uso de esta estrategia:

$(".more").click(function(){
if($(this).parent().find(''.showMore'').length) {
$(this).parent().find(''.showMore'').removeClass(''showMore'').css(''max-height'',''90px'');
$(this).parent().find(''.more'').removeClass(''less'').text(''More'');
} else {
$(this).parent().find(''.text'').addClass(''showMore'').css(''max-height'',$(this).parent().find(''span'').height());
$(this).parent().find(''.more'').addClass(''less'').text(''Less'');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span></div>
<div class="more">More</div>
</div>

(Este ejemplo específico es el uso de este truco para animar la altura máxima y evitar el retraso de la animación al contraerse (cuando se usa un número alto para la propiedad de altura máxima).

Answer 3

Para obtener más información acerca de la propiedad .scrollHeight , consulte los docs :

El atributo de solo lectura Element.scrollHeight es una medida de la altura del contenido de un elemento, incluido el contenido no visible en la pantalla debido al desbordamiento. El valor de scrollHeight es igual al mínimo clientHeight que el elemento requeriría para ajustarse a todo el contenido en el punto de vista sin utilizar una barra de desplazamiento vertical. Incluye el relleno del elemento, pero no su margen.

Answer 4

Utilice la propiedad .scrollHeight del nodo DOM: $(''#your_div'')[0].scrollHeight