Làm thế nào để tôi có được .height () thực sự của một tràn: ẩn hoặc tràn: cuộn div?

Tôi có một câu hỏi liên quan đến làm thế nào để có được chiều cao div. Tôi biết.height() vàinnerHeight() , nhưng không ai trong số họ làm việc cho tôi trong trường hợp này. Có một điều là trong trường hợp này, tôi có một div có chiều rộng tràn một tràn: cuộn và div có chiều cao cố định.

Nếu tôi sử dụng .height()hoặc innerHeight(), cả hai đều cho tôi chiều cao của khu vực có thể nhìn thấy, nhưng nếu tôi muốn tràn vào tài khoản, tôi phải làm thế nào?

Sử dụng thuộc .scrollHeighttính của nút DOM:$('#your_div')[0].scrollHeight

Để biết thêm thông tin về .scrollHeighttài sản tham khảo các tài liệu :

Các Element.scrollHeight read-only thuộc tính là một phép đo chiều cao của nội dung của một nguyên tố, trong đó có nội dung không hiển thị trên màn hình do tràn. Giá trị scrollHeight bằng với máy khách tối thiểu. Phần tử sẽ yêu cầu để phù hợp với tất cả nội dung trong quan điểm mà không cần sử dụng thanh cuộn dọc. Nó bao gồm phần tử đệm nhưng không phải phần lề của nó.

Khả năng khác là đặt html ở trạng thái không tràn: phần tử ẩn được đặt 'ngoài' màn hình, giống như vị trí trên cùng tuyệt đối và bên trái là 5000px, sau đó đọc chiều cao của phần tử này. Nó xấu, nhưng làm việc tốt.

Tôi vừa mới đưa ra một giải pháp khác cho vấn đề này, trong đó không còn cần thiết phải sử dụng giá trị từ cao đến cực đại. Nó cần một vài dòng mã javascript để tính chiều cao bên trong của DIV bị sập nhưng sau đó, tất cả là CSS.

1) Tìm nạp và thiết lập chiều cao

Lấy chiều cao bên trong của phần tử bị sập (sử dụng scrollHeight). Phần tử của tôi có một lớp .section__accordeon__contentvà tôi thực sự chạy nó trong một forEach()vòng lặp để đặt chiều cao cho tất cả các bảng, nhưng bạn có ý tưởng.

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

2) Sử dụng biến CSS để mở rộng mục hoạt động

Tiếp theo, sử dụng biến CSS để đặt max-heightgiá trị khi mục có một .activelớp.

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

Ví dụ cuối cùng

Vì vậy, ví dụ đầy đủ diễn ra như sau: vòng lặp đầu tiên thông qua tất cả các bảng accordeon và lưu trữ các scrollHeightgiá trị của chúng dưới dạng các biến CSS. Tiếp theo sử dụng biến CSS làmmax-height giá trị ở trạng thái kích hoạt / mở rộng / mở của phần tử.

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

Và bạn có nó rồi đấy! Một hình ảnh động có chiều cao tối đa thích ứng chỉ sử dụng CSS và một vài dòng mã JavaScript (không yêu cầu jQuery).

Hy vọng điều này sẽ giúp ai đó trong tương lai (hoặc bản thân tương lai của tôi để tham khảo).

Đối với những người không tràn nhưng ẩn bởi lề âm:

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

(xấu nhưng chỉ có một hoạt động cho đến nay)

Một giải pháp đơn giản khác (không thanh lịch lắm, nhưng cũng không quá xấu xí) là đặt bên trong div / spansau đó lấy chiều cao của anh ấy ($(this).find('span).height() ).

Dưới đây là một ví dụ về việc sử dụng chiến lược này:

$(".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>

(Ví dụ cụ thể này đang sử dụng thủ thuật này để tạo hiệu ứng cho chiều cao tối đa và tránh độ trễ hình ảnh động khi thu gọn (khi sử dụng số cao cho thuộc tính chiều cao tối đa).