ฉันจะได้รับจริง. สูง () ของล้น: ซ่อนหรือล้น: เลื่อน div?

ฉันมีคำถามเกี่ยวกับวิธีรับความสูงของ div ฉันรู้.height()และinnerHeight()แต่ไม่มีของพวกเขาไม่ทำงานสำหรับฉันในกรณีนี้ สิ่งนี้คือในกรณีนี้ฉันมี div ที่มีความกว้างมากเกินไป overflow: เลื่อนและ div มีความสูงคงที่

หากฉันใช้.height()หรือinnerHeight()ทั้งสองอย่างให้ความสูงของพื้นที่ที่มองเห็นได้ แต่ถ้าฉันต้องการบัญชีที่มีการไหลมากเกินไปฉันจะดำเนินการอย่างไร

ใช้.scrollHeightคุณสมบัติของโหนด DOM:$('#your_div')[0].scrollHeight

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ.scrollHeightคุณสมบัติดูเอกสาร :

Element.scrollHeightอ่านอย่างเดียวแอตทริบิวต์คือการวัดความสูงของเนื้อหาองค์ประกอบรวมทั้งเนื้อหาที่ไม่สามารถมองเห็นบนหน้าจอเนื่องจากล้น ค่า scrollHeight เท่ากับ clientHeight ต่ำสุดที่องค์ประกอบจะต้องมีเพื่อให้พอดีกับเนื้อหาทั้งหมดในมุมมองโดยไม่ต้องใช้แถบเลื่อนแนวตั้ง มันรวมถึงการเติมองค์ประกอบ แต่ไม่ได้กำไร

ความเป็นไปได้อื่น ๆ ก็คือการวาง html ไว้ในส่วนที่ไม่ล้น: องค์ประกอบที่ซ่อนอยู่จะถูกวาง 'out' ของหน้าจอเช่นตำแหน่งบนสุดที่แน่นอนและเหลือน้อยกว่า 5,000px แล้วอ่านองค์ประกอบความสูง มันน่าเกลียด แต่ทำงานได้ดี

ฉันเพิ่งปรุงสารละลายอื่นสำหรับสิ่งนี้ซึ่งไม่จำเป็นต้องใช้ค่ามากถึงสูงสูงสุดอีกต่อไป มันต้องการโค้ดจาวาสคริปต์สองสามบรรทัดเพื่อคำนวณความสูงภายในของ DIV ที่ยุบลง แต่หลังจากนั้นก็คือ CSS ทั้งหมด

1) การดึงข้อมูลและการตั้งค่าความสูง

ดึงความสูงด้านในขององค์ประกอบที่ยุบ (โดยใช้scrollHeight) องค์ประกอบของฉันมีคลาส.section__accordeon__contentและฉันเรียกใช้สิ่งนี้เป็นforEach()วงเพื่อกำหนดความสูงสำหรับแผงควบคุมทั้งหมด แต่คุณจะได้แนวคิด

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

2) ใช้ตัวแปร CSS เพื่อขยายรายการที่ใช้งานอยู่

จากนั้นใช้ตัวแปร CSS เพื่อตั้งmax-heightค่าเมื่อรายการมี.activeคลาส

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

ตัวอย่างสุดท้าย

ตัวอย่างที่สมบูรณ์จะเป็นดังนี้: ก่อนวนรอบทุกพาเนลแอคคอร์ดและเก็บscrollHeightค่าเป็นตัวแปร CSS ถัดไปใช้ตัวแปร CSS เป็นmax-heightค่าในสถานะแอ็คทีฟ / ขยาย / เปิดขององค์ประกอบ

javascript:

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

CSS:

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

และคุณมีมัน ภาพเคลื่อนไหวปรับความสูงสูงสุดโดยใช้ CSS และโค้ด JavaScript สองสามบรรทัด (ไม่จำเป็นต้องใช้ jQuery)

หวังว่าสิ่งนี้จะช่วยให้ใครบางคนในอนาคต (หรือตัวฉันในอนาคตสำหรับการอ้างอิง)

สำหรับผู้ที่ไม่ล้น แต่ซ่อนโดยระยะขอบติดลบ:

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

(น่าเกลียด แต่เพียงคนเดียวที่ทำงานจนถึง)

อีกวิธีง่ายๆ (ไม่หรูหรามาก แต่ก็ไม่น่าเกลียดเกินไป) คือการวางด้านใน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>

(ตัวอย่างที่เฉพาะเจาะจงนี้ใช้เคล็ดลับนี้เพื่อทำให้เคลื่อนไหวความสูงสูงสุดและหลีกเลี่ยงความล่าช้าของภาพเคลื่อนไหวเมื่อยุบ (เมื่อใช้ตัวเลขสูงสำหรับคุณสมบัติความสูงสูงสุด)