새소식

인기 검색어

JAVASCRIPT & jQuery

스크롤이 브라우저 끝에 도달했을때 이벤트주기

  • -

스크롤 이벤트를 할때, 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' 카테고리의 다른 글

jQuery 전용 선택자 종류  (0) 2024.03.05
jQuery CSS 선택자 종류  (1) 2024.03.05
무한 롤링 배너  (0) 2023.11.06
스크롤 내리면 다음 글 불러오기 (scroll 이벤트)  (0) 2023.02.18
var, let, const 의 차이점  (0) 2023.02.18
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.