π¨0.png ~ 9.pngκΉμ§ 1μ€μ© μΆλ ₯λλ κ°
function displayImage() {
for(i=0;i<=9;i++) {
$("#displayDiv").append("<div><img src='images/"+i+".png' width='100'></div>");
}
}
displayImage();
π¨μ€ν¬λ‘€ μμ§μΌμ λ©μΈμ§ μΆλ ₯
$(window).scroll(function() {
alert("μ€ν¬λ‘€ μ΄λ²€νΈ λ°μ");
});
π¨μ€ν¬λ‘€μ΄ 맨 λ°μΌλ‘ κ°λ©΄ 0~9κΉμ§ λ€μ μΆλ ₯(무ν μ€ν¬λ‘€)
π$(selector).height() : μ νμλ‘ κ²μλ νκ·Έμ λμ΄λ₯Ό λ°ννλ λ©μλ
$(window).scroll(function() {
//alert("μ€ν¬λ‘€ μ΄λ²€νΈ λ°μ");
//
//$(selector).height() : μ νμλ‘ κ²μλ νκ·Έμ λμ΄λ₯Ό λ°ννλ λ©μλ
var docH=$(document).height();
//alert(docH);//1359
//
//$(selector).scrollTop() : μ νμλ‘ κ²μλ νκ·Έμ μ€ν¬λ‘€ μλ¨ μμΉκ°μ λ°ννλ λ©μλ
var scrollH=$(window).height()+$(window).scrollTop();
//
if(scrollH >= docH) {//μ€ν¬λ‘€μ΄ μΆλ ₯μμ(document κ°μ²΄) νλ¨μ μμΉν κ²½μ°
displayImage();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Scroll Event</h1>
<hr>
<div id="displayDiv"></div>
<script type="text/javascript">
function displayImage() {
for(i=0;i<=9;i++) {
$("#displayDiv").append("<div><img src='images/"+i+".png' width='100'></div>");
}
}
displayImage();
$(window).scroll(function() {
var docH=$(document).height();
var scrollH=$(window).height()+$(window).scrollTop();
if(scrollH >= docH) {
displayImage();
}
});
</script>
</body>
</html>
