DIV의 원점 높이를 얻으십시오

StackOverflow https://stackoverflow.com/questions/827996

  •  06-07-2019
  •  | 
  •  

문제

나는 DIV의 CSS를 설정했습니다

height:130px;
overflow:hidden;

나는 현재 높이에서 원래 높이까지의 애니메이션을 원한다. 이것 , 그러나 나는 원점 높이를 얻을 수 없다.

$(function(){
    $('.detail').data('originHeight',$('.detail').height());
    $('.detail').css({height:'130px',overflow:'hidden'})
})

그러나이 작업을 수행하면 DIV는 먼저 모든 것을 보여준 다음 높이를 130px로 설정합니다.

제안이 있습니까?

도움이 되었습니까?

해결책

요소를 사용 하여이 작업을 수행했습니다 scrollHeight 재산.

document.getElementById('element').scrollHeight;

이것은 높이가 설정된 경우 요소의 키가 얼마나 큰지 알려줍니다. auto 그리고 overflow 활성화되었습니다.

다른 팁

당신이 가진 방법은 올바른 방법이지만, 당신은 이것이 당신에게 줄 시각적 깜박임을 피하기 위해 약간의 해킹이 필요할 수 있습니다.

화면에서 DIV를 이동하여 높이를 확인한 다음 다시 움직입니다. 또한 우리가 여기있는 동안 가능한 경우 여러 jQuery 룩업을 사용하지 마십시오. $('.detail') 이것은 매우 비싼 작업 일 수 있습니다.

var $detail = $('.detail');
$detail
    .css({position : 'absolute', left: '-10000px'})
    .data('origHeight', $detail.height())
    .css({position : '', left : '', height : '130px', overflow : 'hidden'})
;

또는 이것이 당신을 위해 작동하지 않는다면, 그것에 반대하지 말고, 그것으로 작업하십시오. 예를 들어, 전체 크기로 시작한 다음 130px로 다시 애니메이션으로 설계에 적응하는 방법을 고려할 수 있습니다. 이렇게하면 정상 크기를 우아하게 확인하고 사용자에게 더 많은 정보가 있음을 알 수 있습니다.

대신 CSS 속성을 제거하여 DIV를 확장 할 수 없습니까?

$('.detail').css({height:'', overflow:''})

나는 그것이 유일한 방법이라고 생각합니다. jQuery에서 CSS를 사용하여 높이를 수정하면 높이가 수정 된 높이가되었습니다. 수정 된 높이는 액세스 할 높이입니다.

내가 생각할 수있는 유일한 시나리오는 jQuery를 사용하여 원래 높이를 상점하거나 고정 높이를 공급하고 jQuery에게 얼마나 오래 확장 될지 알려주는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top