मैं एक ओवरफ़्लो का वास्तविक .height () कैसे प्राप्त करूं: छिपाया या अतिप्रवाह: स्क्रॉल div?

Question

मुझे एक सवाल है कि एक दिव्य ऊंचाई कैसे प्राप्त की जाए। मैं के बारे में पता कर रहा हूँ .height()और innerHeight(), लेकिन उनमें से कोई इस मामले में मेरे लिए काम करता है। बात यह है कि इस मामले में मेरे पास एक div है जो ओवरफ्लो की चौड़ाई से अधिक है: एक स्क्रॉल और div की एक निश्चित ऊंचाई है।

यदि मैं उपयोग करता हूं .height()या innerHeight(), दोनों मुझे दृश्य क्षेत्र की ऊंचाई देते हैं, लेकिन अगर मैं चाहता हूं कि ओवरफ्लो को ध्यान में रखा जाए, तो मैं कैसे जा सकता हूं?

Answer 1

.scrollHeightDOM नोड के गुण का उपयोग करें :$('#your_div')[0].scrollHeight

Comments

यहाँ टिप्पणी के अनुसार , .scrollHeightDOM फ़ंक्शन IE <8.0 ( developer.mozilla.org/en/DOM/element.scrollHeight ) में काम नहीं करेगा

— TMS

scrollHeightकभी-कभी शून्य तब भी लौटता है जब वह छिपा होता है (या उसके माता-पिता छिपे होते हैं), नाराज होकर।

— साइमन ईस्ट

अधिक सही ढंग से $ ('# #_div') का उपयोग करें। प्रोप ('स्क्रॉलहाइट');

— हनिमोव रोमन

मेरे मामले में @Simon यह केवल के साथ एक तत्व में दिखाई दे पिक्सेल की संख्या लौटा रहा है overflow: hidden/:

— पेरे

शुद्ध जावास्क्रिप्ट:document.getElementById('your_div').scrollHeight

— stambikk

Answer 2

.scrollHeightसंपत्ति के बारे में अधिक जानकारी के लिए डॉक्स देखें :

Element.scrollHeight केवल पढ़ने के लिए विशेषता एक तत्व की सामग्री की ऊंचाई का माप सामग्री अतिप्रवाह के कारण स्क्रीन पर दिखाई नहीं भी शामिल है। स्क्रॉलहाइट मान न्यूनतम क्लाइंटहाइट के बराबर है तत्व को ऊर्ध्वाधर स्क्रॉलबार का उपयोग किए बिना सभी सामग्री को व्यूपॉइंट में फिट करने के लिए आवश्यक होगा। इसमें तत्व पैडिंग शामिल है लेकिन इसका मार्जिन नहीं है।

Answer 3

अन्य संभावना html को एक गैर अतिप्रवाह में रखा जाएगा: स्क्रीन के छिपे हुए तत्व को 'आउट' रखा गया है, जैसे पोज़िशन टॉप और लेफ्ट नीच तो 5000px, फिर इस एलिमेंट्स हाइट को पढ़ें। इसके बदसूरत, लेकिन अच्छी तरह से काम करते हैं।

Comments

मैं एसईओ मामलों के लिए इसका उपयोग करने की अनुशंसा नहीं करूंगा यह स्क्रीन रीडर के लिए अजीब लग सकता है। यदि आप ऐसा करते हैं, तो आपको HTML को केवल उस समय के लिए div में रखना होगा जब आप इसे पढ़ रहे हों और जावास्क्रिप्ट के तुरंत बाद हटा दें। लेकिन स्वीकृत उत्तर इस स्थिति के लिए बेहतर है

— यन चोबोट

Answer 4

मैंने इसके लिए एक और समाधान तैयार किया है, जहाँ उच्च-अधिकतम-ऊँचाई मान के लिए -much का उपयोग करना आवश्यक नहीं है। यह ढह चुके DIV की आंतरिक ऊंचाई की गणना करने के लिए जावास्क्रिप्ट कोड की कुछ पंक्तियों की आवश्यकता है लेकिन उसके बाद, यह सभी CSS है।

1) प्राप्त करने और ऊंचाई स्थापित करने

ध्वस्त तत्व (उपयोग करके scrollHeight) की आंतरिक ऊंचाई प्राप्त करें । मेरे तत्व में एक वर्ग है .section__accordeon__contentऔर मैं वास्तव में forEach()सभी पैनलों के लिए ऊँचाई सेट करने के लिए इसे लूप में चलाता हूं , लेकिन आपको यह विचार मिलता है।

document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";

2) सक्रिय आइटम का विस्तार करने के लिए सीएसएस चर का उपयोग करें

अगला, max-heightआइटम को एक .activeवर्ग होने पर मान सेट करने के लिए सीएसएस चर का उपयोग करें ।

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

अंतिम उदाहरण

इसलिए पूर्ण उदाहरण इस तरह से है: पहले सभी समझौते पैनल के माध्यम से लूप और scrollHeightसीएसएस चर के रूप में अपने मूल्यों को संग्रहीत करें । अगले max-heightतत्व के सक्रिय / विस्तारित / खुले राज्य पर मूल्य के रूप में सीएसएस चर का उपयोग करें ।

जावास्क्रिप्ट:

document.querySelectorAll( '.section__accordeon__content' ).forEach(
  function( accordeonPanel ) {
    accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
  }
);

सीएसएस:

.section__accordeon__content {
  max-height: 0px;
  overflow: hidden;
  transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

आखिर तुमने इसे हासिल कर ही लिया है। केवल सीएसएस और जावास्क्रिप्ट कोड की कुछ पंक्तियों (कोई jQuery की आवश्यकता) का उपयोग करके एक अनुकूलतम अधिकतम ऊंचाई एनीमेशन।

आशा है कि यह भविष्य में किसी (या संदर्भ के लिए मेरे भविष्य के स्वयं) में मदद करता है।

Answer 5

उन लोगों के लिए जो अतिप्रवाह नहीं कर रहे हैं लेकिन नकारात्मक मार्जिन द्वारा छिपा रहे हैं:

$('#element').height() + -parseInt($('#element').css("margin-top"));

(बदसूरत लेकिन केवल एक है जो अब तक काम करता है)

Answer 6

एक और सरल समाधान (बहुत सुरुचिपूर्ण नहीं है, लेकिन बहुत बदसूरत भी नहीं है) एक आंतरिक जगह है div / spanतो उसकी ऊंचाई प्राप्त करें ( $(this).find('span).height())।

इस रणनीति का उपयोग करने का एक उदाहरण इस प्रकार है:

$(".more").click(function(){
if($(this).parent().find('.showMore').length) {
$(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
$(this).parent().find('.more').removeClass('less').text('More');
} else {
$(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
$(this).parent().find('.more').addClass('less').text('Less');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span></div>
<div class="more">More</div>
</div>

(यह विशिष्ट उदाहरण अधिकतम-ऊँचाई को चेतन करने के लिए इस ट्रिक का उपयोग कर रहा है और गिरते समय एनीमेशन देरी से बचने के लिए (जब अधिकतम-ऊँची संपत्ति के लिए उच्च संख्या का उपयोग कर रहा है)।