웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리를 사용하여 현재 페이지의 스크롤 전체에 해당하는 높이 값을 알려면 어떻게 알 알 수 있을까요? 아래에서 자세히 알아봅니다.
$(ele).prop('scrollHeight');
보시는 것처럼 prop() 메소드를 사용하면 그 요소가 가진 scrollHeight 값도 가져올 수 있습니다. 그럼 자세한 예제는 아래에서 참고하시기 바랍니다.
@ scroll.html
아래는 스크립트 코드입니다.
실행하면 아래와같이 스크롤 높이가 출력됩니다.
여기까지 스크롤 높이를 구하는 간단한 방법에 대하여 알아보았습니다.
# 예제 실행하기 위 예제를 구현하면 아래와 같습니다. 직접 클릭해보세요!
# 제이쿼리를 사용한 스크롤에 해당하는 높이 값
순수 자바스크립트에서 사용되는 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>
a
bc
def
ghij
klmno
</textarea>
<br>
<button onclick="getScHeight();">getScrollHeight</button>
아래는 스크립트 코드입니다.
getScHeight = function() {
var scHeight = $('#ele').prop('scrollHeight');
console.log(scHeight);
};
var scHeight = $('#ele').prop('scrollHeight');
console.log(scHeight);
};
실행하면 아래와같이 스크롤 높이가 출력됩니다.
172
// 요소의 현재 스크롤높이가 출력됨
// 요소의 현재 스크롤높이가 출력됨
여기까지 스크롤 높이를 구하는 간단한 방법에 대하여 알아보았습니다.
# 예제 실행하기 위 예제를 구현하면 아래와 같습니다. 직접 클릭해보세요!
아래의 글도 찾고 계시지 않나요?
