जावास्क्रिप्ट सीएसएस जांच अगर अतिप्रवाह

Question

अगर एक तत्व overflowed कर दिया गया है पता लगाने के लिए easist तरीका क्या है?

मेरे उपयोग के मामले, है मैं 300px की ऊंचाई के लिए एक निश्चित सामग्री बॉक्स को सीमित करना चाहते। यदि आंतरिक सामग्री उस से लम्बा है, तो मैंने इसे ओवरफ्लो से काट दिया। लेकिन यह overflowed यदि है मैं एक 'अधिक' बटन दिखाना चाहते हैं, लेकिन यदि नहीं मुझे लगता है कि बटन को दिखाने के लिए नहीं करना चाहती।

वहाँ एक आसान तरीका अतिप्रवाह पता लगाने के लिए है, या वहाँ एक बेहतर तरीका है? धन्यवाद।

Answer 1

इस चाहते हैं कुछ: http://jsfiddle.net/Skooljester/jWRRA/1/ काम करता है? यह सिर्फ सामग्री की ऊंचाई की जांच करता है और इसे कंटेनर की ऊंचाई से तुलना करता है। यदि यह आपके से अधिक है तो "अधिक दिखाएं" बटन जोड़ने के लिए कोड में डाल दिया जा सकता है।

अद्यतन: कंटेनर के शीर्ष पर "अधिक दिखाएं" बटन बनाने के लिए कोड जोड़ा गया। अगर बच्चे के माता-पिता offsetHeight तुलना में अधिक है

Answer 2

उपयोग js जांच करने के लिए .. अगर ऐसा है, माता-पिता अतिप्रवाह 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 के साथ बनाएं। फिर आंतरिक div की ऊंचाई बाहरी div की ऊंचाई से अधिक है या नहीं, यह जांचने के लिए .height() फ़ंक्शन का उपयोग करें। मुझे यकीन नहीं है कि यह काम करेगा लेकिन इसे आज़माएं।

Answer 5

element.scrollHeight से element.clientHeight की तुलना करना कार्य करना चाहिए।

Answer 6

एक और मुद्दा जो आपको विचार करना चाहिए वह एक जेएस अनुपलब्धता है। प्रगतिशील जादू या सुंदर गिरावट के बारे में सोचो। मेरा सुझाव है:

• "अधिक" बटन जोड़ने डिफ़ॉल्ट रूप से
• डिफ़ॉल्ट
• छुपा बटन द्वारा और अगर जे एस में आवश्यक सीएसएस संशोधनों अतिप्रवाह नियम जोड़ element.scrollHeight तुलना करने के बाद element.clientHeight को

Answer 7

इस समारोह आप बूलियन मान वापस आ जाएगी अगर DOM एलीमेंट overflowed है:

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

तत्व लंबवत या क्षैतिज रूप से अतिप्रवाह हो सकता है या दोनों

Answer 8

यह निर्धारित करने के लिए एक पहेली है कि एक तत्व को ओवरफ्लो के साथ एक रैपर div का उपयोग करके अतिप्रवाह किया गया है: छिपी हुई और JQuery ऊंचाई() रैपर और आंतरिक के बीच अंतर को मापने के लिए सामग्री 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

यदि आप अधिक सामग्री के लिए केवल एक पहचानकर्ता दिखाना चाहते हैं, तो आप इसे शुद्ध सीएसएस के साथ कर सकते हैं। मैं इसके लिए शुद्ध स्क्रॉलिंग छाया का उपयोग करता हूं। यह चाल background-attachment: local; का उपयोग है। आपका सीएसएस इस तरह दिखता है:

.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/।