반응형
안녕하세요. 영니입니다 😀
스크롤 이벤트를 할때, offset top값을 가져와 처리하기 애매한 경우,
스크롤이 맨 끝으로(하단으로) 도착한경우 이벤트를 발생시켜야 하는 상황이 있죠.
그럴때 쓰는 간단한 jquery소스입니다.
일단 먼저 스크롤 동작을 감지하는 코드부터 알아야 겠죠!
$(window).scroll(function(){
alert('스크롤 동작 감지')
}
그 다음으로는 스크롤 값을 가져옵니다. .scrollTop() 으로요/
.scrollTop()은 스크롤 위치에 따라 변하는 값이고
맨 윗부분에서 0값으로 시작해서 맨끝으로 스크롤시에 스크롤길이 최댓값을 가집니다.
$(window).scroll(function(){
var scrT = $(window).scrollTop();
console.log(scrT); //스크롤 값 확인용
}
"스크롤값 = document 높이 - window높이" 이값을 체크해주면 됩니다.
$(document).height()는 문서의 높이,
$(window).height()는 보여지는 창의 높이 입니다.
$(window).scroll(function(){
var scrT = $(window).scrollTop();
console.log(scrT); //스크롤 값 확인용
if(scrT == $(document).height() - $(window).height()){
//스크롤이 끝에 도달했을때 실행될 이벤트
} else {
//아닐때 이벤트
}
}
아주 간단하지오?🤙
종종 업무에 관한 꿀팁이나 기억해야할 소스가 있다면 공유할게요.
반응형
'퍼블리셔 > javascript,jquery' 카테고리의 다른 글
[바닐라JS] className, ClassList, ClassList method (0) | 2021.02.02 |
---|---|
[바닐라JS] addEventListener() 함수의 실행 이벤트 (0) | 2021.02.02 |
[바닐라JS] 배열 array , object (0) | 2021.01.29 |
[바닐라JS ] 변수 let, const 차이점 (0) | 2021.01.28 |
[jquery] 특정 영역 밖 영역 클릭시 이벤트 (3) | 2020.10.29 |
댓글