[ JS ] 무한 스크롤 만들기 ( div 태그 )

무한 스크롤을 검색 하니 대부분 전체 창에 대한 무한 스크롤 형식이 나와서

다음에 언젠간 또 검색하면서 찾을 태그의 무한 스크롤이니 포스팅으로 남겨 놓으려고 한다 ㅎㅎ...

회사 사수분이 사용하셨던 코드를 분석해보았다 :)

 

 

// scroll 
$("#scroll_tag").scroll(function() { 

	// 페이징을 위한 변수 ( *무시 해도 되는 부분 )
	var page = $("[name='feed_page']").val(); 
	var last_page = $("[name='feed_last_page']").val(); 
	if(page == last_page) return; 


	var innerHeight = $(this).innerHeight(); 
	var scroll=$(this).scrollTop() + $(this).innerHeight(); 
	var height=$(this)[0].scrollHeight; 

	if(scroll >= height){ 

		// exe 
	} 
});

 

 

• innerHeight : 패딩padding 포함 높이 ( 마진margin과 테두리border는 포함이 되지 않음 )
• scrollTop : 선택 태그의 Y축 높이 ( = 스크롤 높이 )
• scrollHeight : 스크롤 시키지 않았을 때의 전체 높이

 

 

 

+) 왜 $(this).scrollHeight로 사용하지 않고 $(this)[0].scrollHeight로 사용한거야?

막간을 이용한 기초 기억하기...😅

저 코드를 볼때 순간 처음 공부했던건 다 까먹고 뭔가 했었다ㅋㅋ

jQuery의 DOM 객체를 그렇게 공부해놓고!

jQuery를 사용하면서 태그가 DOM객체 그러니까 jQuery객체가 만들어지니까!

자바스크립트의 this와 같이 사용하려면 $(this)[0]로 사용해주어야한다 :)

 

참고 : https://www.w3schools.com/jquery/html_innerheight.asp