javascript css taşma olup olmadığını kontrol edin

Question

Bir öğenin taşmadığını tespit etmenin kolay yolu nedir?

Kullanım durumum, 300px yüksekliğe sahip belirli bir içerik kutusunu sınırlamak istiyorum. İç içerik bundan daha uzunsa, bir taşma ile keserim. Fakat eğer taşmışsa, bir 'daha' düğmesi göstermek istiyorum, ancak eğer bu düğmeyi göstermek istemiyorum.

Taşmayı saptamanın kolay bir yolu var mı, yoksa daha iyi bir yöntem var mı? Teşekkürler.

Answer 1

Şunun gibi: http://jsfiddle.net/Skooljester/jWRRA/1/ çalışıyor mu? Sadece içeriğin yüksekliğini kontrol eder ve konteynerin yüksekliğiyle karşılaştırır. Daha büyükse, "Daha fazla göster" düğmesini eklemek için koda girebilirsiniz.

Güncelleme: Kabın üst kısmında "Daha Fazla Göster" düğmesi oluşturmak için kod eklendi. Çocuğun offsetHeight aileden daha fazla ise

Answer 2

kullanım js

Answer 3

Sen göreceli sınırları kontrol edebilirsiniz .. Eğer öyleyse, ebeveynler istediğiniz hangisi scroll/hidden/auto ve daha div üzerinde de display:block taşması yapmak .. kontrol etmek mahsuplaştırmak

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

sen onun sınırları bir konteynerin içinde tamamen olup olmadığını söyleyecektir ve hiçbir açık konteyner sağlanırsa öğenin ofset ebeveyne varsayılan olarak bu bir öğe geçerseniz.

Answer 4

'u kullanır. JQuery kullanıyorsanız, bir hile deneyebilirsiniz: overflow: hidden ile dış div ve içeriğiyle iç div. Sonra iç divun yüksekliğinin dış divun yüksekliğinden daha büyük olup olmadığını kontrol etmek için .height() işlevini kullanın. Çalışacağından emin değilim, ama denemelisin.

Answer 5

element.clientHeight ile element.scrollHeight karşılaştırması görevi gerçekleştirmelidir.

Answer 6

Gözönünde bulundurmanız gereken bir diğer sorun, bir JS kullanılabilirliğidir. Ilerici büyü veya zarif bozulma düşünün. Ben öneririm:

element.clientHeight için element.scrollHeight karşılaştırdıktan sonra düğmeye gizleme varsayılan

tarafından ve JS gerekli CSS değişiklikler eğer taşma kurallar ekleyerek

varsayılan olarak "daha renkli" ekleyerek DOM öğesi taştı eğer

Answer 7

Bu fonksiyon size boolean değerini döndürür:

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

Öğe, dikey veya yatay olarak taşabilir veya her ikisi de

Answer 8

Burada, bir öğenin taşma ile bir sarıcı div kullanılarak taşma olup olmadığını belirleyen bir küme olabilir: gizli ve JQuery height() sarmalayıcı ve iç arasındaki farkı ölçmek için içerik 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); 
}); 

Kaynak:Frameworks & Extensions on jsfiddle.net

Answer 9

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

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

Bu benim için çalıştı. Teşekkür ederim.

Answer 10

Bu, benim için çalışan jQuery çözümdür. clientWidth vb. Çalışmadı.

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

bu ben parent().parent()) kullanmak zorunda, şahsen (elemanların üst fazlasıyla istediğini genişliği sağlamak, işe yaramazsa. position ebeveyne göre olur. Ben de dahil ettik extra_width çünkü benim elementler (" etiketleri ") yüklemek için küçük zaman alabilir resimleri içeren, ancak işlev çağrısı sırasında onlar hesaplama bozulmadan, sıfır genişliğe sahip olması kaçınmak için aşağıdaki çağıran kodu kullanın:.. Bu yardımcı olur

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

Umut

Answer 11

Daha fazla içerik için sadece bir tanımlayıcı göstermek istiyorsanız, bunu saf CSS ile yapabilirsiniz. Bunun için saf kaydırma gölgeleri kullanıyorum. Hile background-attachment: local; kullanımıdır.

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

kod ve bir örnek http://dabblet.com/gist/2462915

bulabileceğiniz Ve bir açıklama burada bulabilirsiniz: Sizin css şöyle görünür http://lea.verou.me/2012/04/background-attachment-local/.