javascript css проверить, если переполнение

Question

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

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

Есть ли простой способ обнаружения переполнения или есть лучший способ? Благодарю.

Answer 1

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

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

Answer 2

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Элемент может быть переполнен вертикально или горизонтально или оба

Answer 8

Вот скрипка для определения того, был ли элемент переполнен с использованием div-оболочки с переполнением: скрытый и высота JQuery() для измерения разницы между оболочкой и внутренней content 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

Answer 9

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

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

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

Answer 10

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

Надеется, что это помогает

Answer 11

Если вы хотите показать только идентификатор для большего количества контента, вы можете сделать это с помощью чистого 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; 
} 

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

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