used - javascript css comprobar si el desbordamiento

void(0) trackid=sp-006

Question

¿Cuál es la forma más fácil de detectar si un elemento se ha desbordado?

Mi caso de uso es, quiero limitar un determinado cuadro de contenido para tener una altura de 300 px. Si el contenido interno es más alto que eso, lo corté con un desbordamiento. Pero si se desborda, quiero mostrar un botón ''más'', pero si no, no quiero mostrar ese botón.

¿Hay alguna manera fácil de detectar el desbordamiento, o hay un método mejor? Gracias.

Answer 1

Algo como esto: http://jsfiddle.net/Skooljester/jWRRA/1/ work? Simplemente verifica la altura del contenido y lo compara con la altura del contenedor. Si es mayor de lo que puede poner en el código para agregar un botón "Mostrar más".

Actualización: se agregó el código para crear un botón "Mostrar más" en la parte superior del contenedor.

Answer 2

Aquí hay un violín para determinar si un elemento se ha desbordado utilizando un div wrapper con overflow: hidden y JQuery height () para medir la diferencia entre el wrapper y un div de contenido interno.

outers.each(function () {
    var inner_h = $(this).find(''.inner'').height();
    console.log(inner_h);
    var outer_h = $(this).height();
    console.log(outer_h);
    var overflowed = (inner_h > outer_h) ? true : false;
    console.log("overflowed = ", overflowed);
});

Fuente: Frameworks & Extensions en jsfiddle.net

Answer 3

Esta es la solución jQuery que funcionó para mí. clientWidth etc. no funcionó.

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

Si esto no funciona, asegúrese de que el elemento primario de los elementos tenga el ancho deseado (personalmente, tuve que usar parent().parent()) . position es relativa al padre. También extra_width porque mis elementos ("etiquetas") contienen imágenes que tardan poco en cargarse, pero durante la llamada de función tienen un ancho cero, arruinando el cálculo. Para evitar eso, utilizo el siguiente código de llamada:

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

Espero que esto ayude.

Answer 4

Esta función le devolverá el valor booleano si el elemento DOM está desbordado:

function isOverflown(element) {
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

El elemento puede desbordarse vertical u horizontalmente o ambos

Answer 5

La comparación de element.scrollHeight con element.clientHeight debería hacer la tarea.

A continuación se muestran las imágenes de MDN que explican Element.scrollHeight y Element.clientHeight.

Answer 6

Otro problema que debes tener en cuenta es la falta de disponibilidad de JS. Piensa en el encantamiento progresivo o la degradación elegante. Yo sugeriría:

• agregando "más botón" por defecto
• agregar reglas de desbordamiento por defecto
• botón de ocultación y, si es necesario, modificaciones de CSS en JS después de comparar element.scrollHeight con element.clientHeight

Answer 7

Puede verificar los límites relativos al padre desplazado.

// Position of left edge relative to frame left courtesy
// http://www.quirksmode.org/js/findpos.html
function absleft(el) {
  var x = 0;
  for (; el; el = el.offsetParent) {
    x += el.offsetLeft;
  }
  return x;
}

// Position of top edge relative to top of frame.
function abstop(el) {
  var y = 0;
  for (; el; el = el.offsetParent) {
    y += el.offsetTop;
  }
  return y;
}

// True iff el''s bounding rectangle includes a non-zero area
// the container''s bounding rectangle.
function overflows(el, opt_container) {
  var cont = opt_container || el.offsetParent;
  var left = absleft(el), right = left + el.offsetWidth,
      top = abstop(el), bottom = top + el.offsetHeight;
  var cleft = absleft(cont), cright = cleft + cont.offsetWidth,
      ctop = abstop(cont), cbottom = ctop + cont.offsetHeight;
  return left < cleft || top < ctop
      || right > cright || bottom > cbottom;
}

Si pasas este elemento, te dirá si sus límites están completamente dentro de un contenedor, y de forma predeterminada será el elemento primario de desplazamiento del elemento si no se proporciona un contenedor explícito. Usa

Answer 8

Si desea mostrar solo un identificador para más contenido, puede hacerlo con CSS puro. Utilizo sombras de desplazamiento puro para esto. El truco es el uso de background-attachment: local; . Tu css se ve así:

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;

  background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

    /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background:
    /* Shadow covers */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

  /* Opera doesn''t support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

El código y un ejemplo que puedes encontrar en http://dabblet.com/gist/2462915

Y una explicación que puede encontrar aquí: http://lea.verou.me/2012/04/background-attachment-local/ .

Answer 9

Si está utilizando jQuery, puede intentar un truco: hacer div exterior con overflow: hidden div overflow: hidden e interno con contenido. Luego use la función .height() para verificar si la altura del div interno es mayor que la altura del div externo. No estoy seguro de que funcione, pero pruébalo.

Answer 10

use js para verificar si la offsetHeight del niño es superior a la de los padres ... si lo es, haga que los padres desborden scroll/hidden/auto según lo que desee, y también display:block on the div.

Answer 11

setTimeout(function(){
    isOverflowed(element)           
},500)

function isOverflowed(element){
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

Esto fue trabajado para mí. Gracias.