특정 항목이 컨테이너에서 나왔는지 어떻게 알 수 있습니까?

Question

나는 작은 example

$('#block_container').addClass('animate'); 
var el = $('.block__el'); 
var height = el.height(); 
var allHeight = height * el.length; 
$(".animate").css('transform', 'translateY(-'+ allHeight +'px)') 

이 또한 내가 예를 들어, 항목 [10] 컨테이너의 가시성의 영역을 남긴 메시지를 추론 할 나에게로 이해할 수 없다 썼다.

나는 offsettop를 통해 시도, 그러나 이것은 당신이 국경을 계산해야하는 올바른 방법

당신의 계산에

Answer 1

은이 질문은 (CSS에 translateAxis를 사용하는 경우 요소의 위치를 ​​점점) 더 많거나 적은에서 대답했다 이 게시물 : 그러나

How do I get the position of an element after css3 translation in JavaScript?

당신이 자세히 요소를 추적해야하는 경우, 내가보기 엔 자바 스크립트를 사용하여 권합니다는 빠른 대신에 CSS의 페이지 주위를 조작하는 더 쉽고 균일 한 브라우저를 제공합니다.

CSS를 사용하여 DOM의 상태를 변경하고 자바 스크립트로 그 상태를 잡으려고하면 동등한 javascipt를 작성하는 것이 정말 힘들지 않는 한 약간의 반 패턴이 있습니다.

Answer 2

없습니다. 각 항목의 너비는 1px이므로 각 항목의 높이가 height 속성보다 2px 큽니다. 당신이 모든 요소 box-sizing: border-box을주는 경우에

은 다음 높이를 경계로 계산되며, 귀하의 예제가 작동합니다

는

div { 
    box-sizing: border-box; 
}