제이쿼리를 사용하여 현재 페이지의 스크롤 전체에 해당하는 높이 값을 알려면 어떻게 알 알 수 있을까요? 아래에서 자세히 알아봅니다.



# 제이쿼리를 사용한 스크롤에 해당하는 높이 값순수 자바스크립트에서 사용되는 scrollHeight 프로퍼티는 특정요소에 사용시 scroll되어 나타나는 부분까지 높이를 반환합니다. 제이쿼리를 사용하여 scrollHeight 값을 가져오려면 어떻게 해야할까요? 방법은 아래와 같습니다.

$(ele).prop('scrollHeight');

보시는 것처럼 prop() 메소드를 사용하면 그 요소가 가진 scrollHeight 값도 가져올 수 있습니다. 그럼 자세한 예제는 아래에서 참고하시기 바랍니다.



# scrollHeight 예제보기아래는 textarea 태그의 스크롤 높이를 구하려고합니다. 정확한 스크롤 높이값을 알기위해서 아래와 같이 코드를 수행합니다.

@ scroll.html
<textarea id="ele">
  a
  bc
  def
  ghij
  klmno
</textarea>
<br>
<button onclick="getScHeight();">getScrollHeight</button>

아래는 스크립트 코드입니다.
getScHeight = function() {
  var scHeight = $('#ele').prop('scrollHeight');
  console.log(scHeight);
};


실행하면 아래와같이 스크롤 높이가 출력됩니다.
172
// 요소의 현재 스크롤높이가 출력됨


여기까지 스크롤 높이를 구하는 간단한 방법에 대하여 알아보았습니다.



# 예제 실행하기 위 예제를 구현하면 아래와 같습니다. 직접 클릭해보세요!