반응형
사용자가 웹 페이지를 다 읽었는 지 판단하여 다른 액션을 이어가고자 할 때 또는 꼭 읽어야 하는 글이 있을 경우 글의 맨 아래에서 버튼 상태를 활성화 시킬 때도 유용할 수 있습니다.
function detectBottom() {
var scrollTop = $(window).scrollTop();
var innerHeight = $(window).innerHeight();
var scrollHeight = $('body').prop('scrollHeight');
if (scrollTop + innerHeight >= scrollHeight) {
return true;
} else {
return false;
}
}
스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거나 크면 맨 아래까지 왔다고 판단하는 로직입니다.
맨 위를 감지하는 방법은 설명하기도 민망할 정도로 매우 간단합니다.
function detectTop() {
var scrollTop = $(window).scrollTop();
if (scrollTop == 0) {
return true;
} else {
return false;
}
}
스크롤 된 위치가 0인지만 보면 바로 판단이 됩니다.
이 로직을 응용하면 본문의 위치를 나타내는 프로그레스바를 만들 수도 있어 보입니다.
반응형
'프로그래밍 & IT 정보 > Javascript' 카테고리의 다른 글
자바스크립트 HTML 특정 요소 도달 감지 예시 (0) | 2021.12.22 |
---|---|
자바스크립트 HTML DOM 변경 감시 예시 (2) | 2021.12.22 |
자바스크립트 async / await 예제 (0) | 2021.02.20 |
자바스크립트 Promise 예제를 통해 쉽게 이해하기 (6) | 2020.12.04 |
자바스크립트 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 (12) | 2020.12.01 |
자바스크립트 Base64 이미지 코드 파일로 쓰기 (0) | 2020.09.24 |
자바스크립트 이미지 크기 조정 및 보정 로직 (0) | 2020.09.24 |
자바스크립트 텍스트 길이(바이트) 구하기 (0) | 2020.09.24 |
댓글