em 단위를 사용하여 div 스크롤 및 높이를 정확하게 측정하는 방법은 더 어렵습니다.

Question

모바일 웹 사이트에 대한 채팅이 있으며 채팅 거품 크기로는 em 단위를 사용하고 있습니다. 그렇기 때문에 요소는 항상 원형이 아닌 것처럼 보입니다 (예 : 510.673). 정확한 크기를 알아야 특정 단추를 표시 할시기를 알 수 있으며 언제 대화에서 이전 채팅 메시지를로드 할 수 있습니까? 사업부의 상단에 도달하면 여기

<div class="chat-window"> 
    <div id="chatWindow" class="item-content" style="height: 100%; overflow: auto;"> 
</div> 

overflow: auto; 때문에없이 필요한 HTML을, 내가 전화를받지 않습니다. 여기

는이 chatWindow 요소

$('#chatWindow').on('scroll', onScroll); 

에 이벤트로 부착이 채팅 거품이 때의 모양을

onScroll() { 
     const chatWindow = $('#chatWindow'); 
     const scrollTop = chatWindow.scrollTop(); 
     const scrollHeight = chatWindow[0].scrollHeight; 
     const clientHeight = chatWindow[0].clientHeight; 
     if (scrollTop <= 0) { 
      // When top is reached 
      isInBottom = false; 
      // more code 
     } else if (scrollTop + clientHeight >= scrollHeight) { 
      // When bottom is reached 
      isInBottom = true; 
      // more code 
     } else { 
      // When anywhere else 
      isInBottom = false; 
     } 
    } 

그래서이있는 onScroll 기능입니다, 자바 스크립트입니다 그들은 단위와 함께 있습니다

그들은 스크롤 번호를 계산할 수 없으므로 정확하게 늦게.

나는 chatWindow[0].clientHeight 대신에 chatWindow[0].getBoundingClientRect().height으로 시도했지만, 그 하나의 매개 변수에 대해서만, 다른 두 개는 부동 소수점을 가진 정확한 숫자가 필요합니다.

어떻게하면됩니까?

Answer 1

더 자세히 설명해 주시겠습니까?

chatWindow [0] .getBoundingClientRect()는 키로 '높이'를 갖는 객체를 반환합니다.

chatWindow[0].getBoundingClientRect().height === chatWindow[0].clientHeight 

나머지 개체의 값은 ViewPort와 관련이 있습니다. 이것은 당신의 계산에도 영향을 미칠 것입니다.

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect