[ jQuery ] Infinite Scroll 무한 스크롤 이벤트 적용하기
2022. 2. 22. 13:01ㆍjQuery
< 코드 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>무한 스크롤</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script type="text/javascript">
// 문서 객체 추가 코드
$(document).ready(function() { // 이벤트 연결
var ele = function() {
for (var i = 1; i <= 20; i++) {
$('<h1>' + i + '</h1>').appendTo('body');
}
};
ele();
$(window).scroll(function() { // 이벤트 연결
var a = $(window).scrollTop() + $(window).height(); // 스크롤바 높이
var b = $(document).height(); // 화면 전체 높이
if (a <= b) { // 스크롤바가 밑에 닿으면 (a==b가 원래코드지만 미묘하게 화면 크기가 달라 작동이 안될 경우 <= 사용하기)
ele();
}
});
});
</script>
</body>
</html>'jQuery' 카테고리의 다른 글
| [ jQuery ] Light Box 사용하여 팝업창 만들기 (0) | 2022.02.23 |
|---|---|
| [ jQuery ] 배너형 갤러리 만들기 (0) | 2022.02.23 |
| [ jQuery ] Drop down 메뉴바 만들기 (0) | 2022.02.22 |
| [ jQuery ] 라이브러리 CDN 방식으로 연결하기 (0) | 2022.02.22 |
| [ jQuery ] 라이브러리 연결하기 (0) | 2022.02.22 |