Проверьте, не переполняется ли содержимое элемента?

Question

Какой самый простой способ определить, был ли переполнен элемент?

Мой пример использования: я хочу ограничить определенное поле для контента высотой 300 пикселей.Если внутреннее содержимое выше этого, я обрезаю его переполнением.Но если он переполнен, я хочу показать кнопку «больше», но если нет, я не хочу показывать эту кнопку.

Есть ли простой способ обнаружить переполнение или есть лучший метод?

Answer 1

Альтернативой ответа jquery является использование клавиши [0] для доступа к необработанному элементу, например:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

Answer 2

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

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

Это сработало для меня. Спасибо.

Answer 3

Вы можете проверить границы относительно родителя смещения.

// 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;
}

Если вы передадите этот элемент, он сообщит вам, находятся ли его границы целиком внутри контейнера, и по умолчанию будет родительским смещением элемента, если не указан явный контейнер. Использует