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

154

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

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

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

javascript css overflow Гарри
источник

86

Если вы хотите показать только идентификатор для большего количества контента, то вы можете сделать это с помощью чистого CSS. Я использую чистые тени прокрутки для этого. Хитрость заключается в использовании background-attachment: local;. Ваш CSS выглядит так:

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

<div class="scrollbox">
  <ul>
    <li>Not enough content to scroll</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>


<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

Развернуть фрагмент

Код и пример вы можете найти на http://dabblet.com/gist/2462915

И объяснение вы можете найти здесь: http://lea.verou.me/2012/04/background-attachment-local/ .

RWAM
источник

1

Хорошая идея, но в вашем примере фон (тень) будет позади текста!

DreamTeK

Отличный трюк, однако в Chrome он показывает только статическую тень снизу, он никогда не исчезает и верхняя тень никогда не отображается

Джаред

214

Элемент может быть переполнен вертикально, горизонтально или обоими. Эта функция вернет вам логическое значение, если элемент DOM переполнен:

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

Показать фрагмент кода

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

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

Развернуть фрагмент

Пример ES6:

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}

micnic
источник

41

Отличное решение! Вот вариант jQuery (для использования с $("#element").overflown()):$.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}

Sygmoral

@micnic привет, я использую ionic2 и пытаюсь сделать то же самое ... но функция всегда возвращает true ... есть ли другой способ сделать что-то под углом 2

Ясир

@DavidBracoly, эта функция для чистого API DOM, у меня нет опыта работы с Ionic / Angular, я думаю, вам следует получить оригинальный элемент DOM и использовать эту функцию

micnic

3

Только для Firefox: element.addEventListener ("overflow", () => log( "overflow" ), false);ссылка: событие переполнения

Реза

18

По сравнению element.scrollHeightс element.clientHeightдолжен сделать задачу.

Ниже приведены изображения из MDN, поясняющие Element.scrollHeight и Element.clientHeight.

Берги
источник

2

Да, но в соответствии с quirksmode это работает для большинства - и намного проще, чем другие опубликованные решения.

Берги

@Harry: поддерживается во всех современных браузерах (по крайней мере, в настольных), поэтому не имеет значения, что он формально нестандартный.

Марат Таналин

1

Здесь эти свойства всегда имеют одинаковые значения.

Коппор

7

Я сделал многокомпонентную ручку, демонстрирующую вышеупомянутые ответы (например, используя overflow hidden и height), а также как вы будете расширять / сворачивать переполненные элементы

Пример 1: https://codepen.io/Kagerjay/pen/rraKLB (очень простой пример, без JavaScript, просто для обрезки переполненных элементов)

Пример 2: https://codepen.io/Kagerjay/pen/LBErJL (один обработчик события показывает больше / меньше на переполненных элементах)

Пример 3: https://codepen.io/Kagerjay/pen/MBYBoJ (Много обработчик событий во многих показывает больше / меньше на переполненных элементах)

Я также приложил пример 3 ниже , я использую Jade / Pug, так что это может быть немного многословно. Я предлагаю проверить codepens, которые я сделал, это проще понять.

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

// Jquery Toggle Text Plugin
$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

// Toggle Overflow
function toggleOverflow(e){
  e.target.parentElement.classList.toggle("grid-parent--showall");
  $(e.target).toggleText("Show More", "Show LESS");
}

// Where stuff happens
var parents = document.querySelectorAll(".grid-parent");

parents.forEach(parent => {
  if(isOverflown(parent)){
    parent.lastElementChild.classList.add("btn-show");
    parent.lastElementChild.addEventListener('click', toggleOverflow);
  }
})

body {
  background-color: #EEF0ED;
  margin-bottom: 300px;
}

.grid-parent {
  margin: 20px;
  width: 250px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 100px;
  position: relative;
}
.grid-parent--showall {
  max-height: none;
}

.grid-item {
  background-color: blue;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid red;
}
.grid-item:nth-of-type(even) {
  background-color: lightblue;
}

.btn-expand {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding: 3px;
  background-color: red;
  color: white;
}

.btn-show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p>
  <p>Click "SHOW MORE" to see the results</p>
</section>
<radio></radio>
<div class="wrapper">
  <h3>5 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>8 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>10 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>13 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>16 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>19 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
</div>

Развернуть фрагмент

Винсент Тан
источник

4

Будет ли что-то вроде этого: http://jsfiddle.net/Skooljester/jWRRA/1/ работать? Он просто проверяет высоту содержимого и сравнивает его с высотой контейнера. Если оно больше, чем вы можете вставить в код, добавьте кнопку «Показать больше».

Обновление: добавлен код для создания кнопки «Показать больше» в верхней части контейнера.

ayyp
источник

3

Если вы используете jQuery, вы можете попробовать хитрость: сделать внешний overflow: hiddendiv с контентом и внутренний div с контентом. Затем используйте .height()функцию, чтобы проверить, больше ли высота внутреннего блока, чем высота внешнего блока. Я не уверен, что это сработает, но попробуй.

TMS
источник

1

используйте js, чтобы проверить, больше ли ребенок, offsetHeightчем родители .. если это так, сделайте так, чтобы родители переполняли все, scroll/hidden/autoчто вы хотите, а также display:blockна большее деление ..

Вивек Чандра
источник

1

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

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

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

Майк Самуэль
источник

1

Другая проблема, которую вы должны рассмотреть, - это недоступность JS. Думайте о прогрессирующем очаровании или постепенном ухудшении. Я бы предложил:

добавление кнопки «еще» по умолчанию
добавление правил переполнения по умолчанию
скрывающая кнопка и при необходимости изменения CSS в JS после сравнения element.scrollHeight с element.clientHeight

MFix
источник

1

Вот скрипка для определения того, был ли переполнен элемент, используя div обертки с overflow: hidden и JQuery height () для измерения разницы между оболочкой и внутренним div содержимого.

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

Источник: рамки и расширения на jsfiddle.net

user1295799
источник

1

Это решение JQuery, которое работало для меня. clientWidthи т.д. не сработало.

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

Если это не работает, убедитесь, что родительский элемент имеет желаемую ширину (лично я должен был использовать parent().parent()). positionОтносительно родительского. Я также включил, extra_widthпотому что мои элементы («теги») содержат изображения, которые занимают небольшое время загрузить, но во время вызова функции они имеют нулевую ширину, что портит вычисления. Чтобы обойти это, я использую следующий код вызова:

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

Надеюсь это поможет.

Денис Голомазов
источник

0

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

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

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

Krunal
источник

3

Чем это отличается от ответа Микника?

carefulnow1

0

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

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

Antony
источник

0

Я расширил элемент по причинам инкапсуляции. Из микрофонного ответа.

/*
 * isOverflowing
 * 
 * Checks to see if the element has overflowing content
 * 
 * @returns {}
 */
Element.prototype.isOverflowing = function(){
    return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}

Используйте это так

let elementInQuestion = document.getElementById("id_selector");

    if(elementInQuestion.isOverflowing()){
        // do something
    }

Дэвид Кльюс
источник

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

Ответы: