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

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

Мой вариант использования: я 9X_javascript хочу ограничить высоту определенного блока 9X_max-width содержимого до 300 пикселей. Если внутреннее 9X_css содержимое выше этого, я обрезаю его переливом. Но 9X_css3 если он переполнен, я хочу показать кнопку 9X_box-shadow «еще», а если нет, я не хочу показывать 9X_max-width эту кнопку.

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

238
0
13
Общее количество ответов: 13

Ответ #1

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

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

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;
}
This is some text inside the div which we are testing
This is text.

Пример ES6:

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

335
2

  • Только для Firefox: `element.addEventListener (" ove ...

Ответ #2

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

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

.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;
}
  • Not enough content to scroll
  • 2
  • 3
  • 4
  • 5
  • Ah! Scroll below!
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • The end!
  • No shadow there.

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

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

122
1

  • Хорошая идея, но в вашем примере фон (тень) будет позади текста!<p><span c ...

Ответ #3

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

Сравнение element.scrollHeight и element.clientHeight должно выполнить задачу.

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

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

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

24
2

  • Да, но согласно [quirksmode] (http://quirksmode.org/dom/w3c_cssom.html#elementview) он ...

Ответ #4

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

Я сделал составной код, демонстрирующий 9X_css приведенные выше ответы (например, с использованием 9X_css-layout скрытого переполнения и высоты), а также 9X_box-shadow то, как вы могли бы развернуть / свернуть 9X_javascript-library переполненные элементы

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

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

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

Я также прикрепил пример 3 ниже, я использую Jade / Pug, поэтому 9X_javascript-library он может быть немного многословным. Я предлагаю 9X_js проверить коды, которые я упростил для понимания.

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

Any grid-parent over 10 child items has a "SHOW MORE" button to expand

Click "SHOW MORE" to see the results

5 child elements

Show More

8 child elements

Show More

10 child elements

Show More

13 child elements

Show More

16 child elements

Show More

19 child elements

Show More

11
0

Ответ #5

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

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

Обновление: добавлен код для 9X_css3 создания кнопки «Показать еще» в верхней 9X_max-width части контейнера.

4
0

Ответ #6

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

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

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

Если вы передадите 9X_javascript-library этому элементу, он сообщит вам, полностью 9X_inline-block ли его границы находятся внутри контейнера, и 9X_css-classes по умолчанию будет использовать родительский 9X_vanilla-javascript элемент смещения, если явный контейнер не 9X_vanillajs указан. Он использует

3
0

Ответ #7

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

Если вы используете jQuery, вы можете попробовать 9X_ecmascript трюк: сделать внешний div с помощью overflow: hidden и внутренний 9X_css3 div с содержимым. Затем используйте функцию 9X_javascript .height(), чтобы проверить, больше ли высота внутреннего 9X_.js div, чем высота внешнего div. Я не уверен, что 9X_max-width это сработает, но попробуйте.

3
0

Ответ #8

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

Я расширил Element по причинам инкапсуляции. От 9X_max-width Micnic ответ.

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

3
0

Ответ #9

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

Еще одна проблема, которую следует учитывать, - это 9X_max-width недоступность JS. Подумайте о прогрессивном 9X_vanilla-javascript очаровании или изящной деградации. Я бы 9X_inline-block посоветовал:

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

2
0

Ответ #10

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

используйте js, чтобы проверить, больше 9X_vanilla-javascript ли offsetHeight дочернего элемента, чем родительский. Если 9X_vanillajs это так, заставьте родителей переполнять 9X_max-width scroll/hidden/auto в зависимости от того, что вы хотите, а 9X_box-shadow также display:block на большем div ..

1
0

Ответ #11

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

Вот скрипт для определения того, был ли 9X_js элемент переполнен, используя обертку div 9X_vanillajs с overflow: hidden и JQuery height() для 9X_css измерения разницы между оберткой и внутренним 9X_vanillajs содержимым 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);
});

Источник: Frameworks & Extensions on jsfiddle.net

1
0

Ответ #12

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

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

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

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

9X_javascript

1
1

  • Чем это отличается от ответа Микника?<p><span c ...

Ответ #13

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

Это решение jQuery, которое у меня сработало. clientWidth и 9X_javascript-library т. д. не работают

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

Если это не сработает, убедитесь, что 9X_css-classes родительский элемент имеет желаемую ширину 9X_vanilla-javascript (лично мне пришлось использовать parent().parent()). position относится 9X_css3 к родительскому элементу. Я также включил 9X_inline-block extra_width, потому что мои элементы («теги») содержат 9X_css-classes изображения, загрузка которых занимает мало 9X_vanilla-javascript времени, но во время вызова функции они 9X_ecmascript имеют нулевую ширину, что портит расчет. Чтобы 9X_.js обойти это, я использую следующий вызывающий 9X_javascript код:

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

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

1
0