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

Если вы хотите отображать только идентификатор 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; }

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

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

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

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

Я сделал составной код, демонстрирующий 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; }

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

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

Вы можете проверить границы относительно 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 указан. Он использует

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

Я расширил 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 } 

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

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

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

Вот скрипт для определения того, был ли 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

setTimeout(function(){ isOverflowed(element) },500) function isOverflowed(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } 
Это сработало для меня. Спасибо.
9X_javascript

Это решение 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(); } }); 

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