जांचें कि क्या किसी तत्व की सामग्री बह रही है?

153

यह पता लगाने का सबसे आसान तरीका है कि क्या कोई तत्व बह निकला है?

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

क्या अतिप्रवाह का पता लगाने का एक आसान तरीका है, या कोई बेहतर तरीका है?

javascript css overflow

— सताना
स्रोत

86

यदि आप अधिक सामग्री के लिए केवल एक पहचानकर्ता दिखाना चाहते हैं, तो आप शुद्ध सीएसएस के साथ ऐसा कर सकते हैं। मैं इसके लिए शुद्ध स्क्रॉलिंग शैडो का उपयोग करता हूं। चाल का उपयोग है 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;
}

<div class="scrollbox">
  <ul>
    <li>Not enough content to scroll</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>


<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

स्निपेट का विस्तार करें

कोड और उदाहरण आप पर पा सकते हैं http://dabblet.com/gist/2462915

और एक स्पष्टीकरण आप यहां पा सकते हैं: http://lea.verou.me/2012/04/background-attachment-local/ ।

— RWAM
स्रोत

1

अच्छा विचार है लेकिन आपके उदाहरण में पृष्ठभूमि (छाया) पाठ के पीछे होगी!

— ड्रीमटेक

महान चाल, हालांकि क्रोम में यह तल पर केवल स्थिर छाया दिखाता है, यह कभी गायब नहीं होता है और ऊपरी छाया कभी नहीं दिखाता है

— जारेड

214

तत्व लंबवत, क्षैतिज या दोनों तरह से ओवरफ्लो हो सकता है। यदि DOM तत्व ओवरफ्लो होता है तो यह फ़ंक्शन आपको बूलियन मान लौटाएगा:

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

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

स्निपेट का विस्तार करें

ES6 उदाहरण:

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

— micnic
स्रोत

41

महान समाधान! यहाँ एक jQuery संस्करण (के साथ प्रयोग किया जाना है $("#element").overflown()):$.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}

— Sygmoral

@micnic हाय, मैं आयनिक 2 का उपयोग कर रहा हूं और एक ही काम करने की कोशिश कर रहा हूं ... लेकिन फ़ंक्शन हमेशा सही रहता है ... कोणीय 2 में चीजों को करने का एक अलग तरीका है

— यासिर

@ डेविडबिरोली, यह फ़ंक्शन शुद्ध डोम एपीआई के लिए है, मुझे इओनिक / कोणीय के साथ अनुभव नहीं है, मुझे लगता है कि आपको मूल डोम तत्व मिलना चाहिए और इस फ़ंक्शन का उपयोग करना चाहिए

— micnic

3

केवल फ़ायरफ़ॉक्स के लिए: element.addEventListener ("overflow", () => log( "overflow" ), false);संदर्भ: अतिप्रवाह घटना

— रेजा

18

तुलना element.scrollHeightकरने के लिए element.clientHeightकाम करना चाहिए।

नीचे MDN से चित्र बताए जा रहे हैं। Element.scrollHeight और Element.clientHeight।

— Bergi
स्रोत

2

हाँ, लेकिन quirksmode के अनुसार यह सबसे अधिक काम करता है - और अन्य पोस्ट किए गए समाधानों की तुलना में बहुत सरल है।

— बर्गी

@ हैरी: यह सभी वर्तमान ब्राउज़रों (कम से कम डेस्कटॉप वाले) में समर्थित है, इसलिए इससे कोई फर्क नहीं पड़ता कि यह औपचारिक रूप से गैरमानक है।

— मराट तनालिन

1

यहां, इन गुणों में हमेशा समान मूल्य होते हैं।

— कोपरप्स

7

मैंने उपरोक्त उत्तरों को प्रदर्शित करते हुए एक मल्टीपार्ट कोडपेन बनाया (उदाहरण के लिए छिपी हुई और ऊँचाई का उपयोग करके) लेकिन यह भी कि आप कैसे बहिष्कृत वस्तुओं का विस्तार / पतन करेंगे

उदाहरण 1: https://codepen.io/Kagerjay/pen/rraKLB (वास्तविक सरल उदाहरण, कोई जावास्क्रिप्ट, बस अतिप्रवाहित वस्तुओं को क्लिप करने के लिए)

उदाहरण 2: https://codepen.io/Kagerjay/pen/LBErJL (एकल इवेंट हैंडलर अतिप्रवाहित वस्तुओं पर अधिक / प्रदर्शन रहित है)

उदाहरण 3: https://codepen.io/Kagerjay/pen/MBYBoJ (कई इवेंट हैंडलर कई शो में अधिक / शो ओवरफ्लो आइटम पर कम)

मैंने नीचे उदाहरण 3 संलग्न किया है , मैं जेड / पग का उपयोग करता हूं ताकि यह एक टैड क्रिया हो। मेरा सुझाव है कि मैंने उन कोडपनों की जाँच की जिन्हें मैंने समझ लिया है।

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p>
  <p>Click "SHOW MORE" to see the results</p>
</section>
<radio></radio>
<div class="wrapper">
  <h3>5 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>8 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>10 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>13 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>16 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
  <h3>19 child elements</h3>
  <div class="grid-parent">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="btn-expand">Show More</div>
  </div>
</div>

स्निपेट का विस्तार करें

— विन्सेंट तांग
स्रोत

4

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

अपडेट: कंटेनर के शीर्ष पर "अधिक दिखाएं" बटन बनाने के लिए कोड जोड़ा गया।

— ayyp
स्रोत

3

यदि आप jQuery का उपयोग कर रहे हैं, तो आप एक तरकीब आज़मा सकते हैं: बाहरी div को overflow: hiddenऔर आंतरिक div को सामग्री के साथ बनाएँ। फिर .height()यह देखने के लिए फ़ंक्शन का उपयोग करें कि क्या आंतरिक div की ऊंचाई बाहरी div की ऊंचाई से अधिक है। मुझे यकीन नहीं है कि यह काम करेगा लेकिन इसे आज़माएं।

— टीएमएस
स्रोत

1

अगर बच्चे offsetHeightमाता-पिता से अधिक हैं, तो यह जांचने के लिए js का उपयोग करें .. यदि यह है, तो माता-पिता को scroll/hidden/autoजो भी आप चाहते हैं और display:blockअधिक div पर भी अतिप्रवाह करें ।

— विवेक चंद्र
स्रोत

1

आप ऑफसेट अभिभावक के सापेक्ष सीमा की जांच कर सकते हैं।

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

यदि आप इसे एक तत्व देते हैं, तो यह आपको बताएगा कि क्या इसकी सीमा पूरी तरह से एक कंटेनर के अंदर है, और तत्व का ऑफसेट माता-पिता के लिए डिफ़ॉल्ट होगा यदि कोई स्पष्ट कंटेनर प्रदान नहीं किया गया है। यह उपयोगकर्ता है

— माइक सैमुअल
स्रोत

1

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

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

— MFix
स्रोत

1

यहाँ यह निर्धारित करने के लिए कि क्या कोई तत्व अतिप्रवाह के साथ एक आवरण div का उपयोग करके ओवरफ्लो किया गया है: आवरण और एक आंतरिक सामग्री div के बीच अंतर को मापने के लिए छिपा हुआ और JQuery ऊंचाई ()।

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

स्रोत: चौखटे और एक्सटेंशन jsfiddle.net पर

— user1295799
स्रोत

1

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

उम्मीद है की यह मदद करेगा।

— डेनिस गोलोमाज़ोव
स्रोत

0

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

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

यह मेरे लिए काम किया था। धन्यवाद।

— Krunal
स्रोत

3

यह माइकनी के उत्तर से कैसे भिन्न है?

— सावधान १

0

जवाब के लिए jquery विकल्प कच्चे तत्व तक पहुँचने के लिए [0] कुंजी का उपयोग करना है:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

— एंटनी
स्रोत

0

मैंने एन्कैप्सुलेशन कारणों के लिए तत्व बढ़ाया है। सूक्ष्म उत्तर से।

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

— डेविड क्लीवेज
स्रोत