콘텐츠를 일정 높이 기준으로 페이징 처리
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="screen">
.box {margin:auto; height:210px; width:300px; position:relative; overflow:hidden; border:1px solid gray;}
</style>
<div id='box' class="box">
</div>
<ul>
<li class='prev'>이전</li>
<li class='next'>다음</li>
</ul>
<script>
var txt = '';
for(var i = 1 ; i <= 300 ; i++) {
txt += i + '<br>';
}
box.innerHTML = txt;
$(".box").contents().wrapAll('<div class="content"/>');
$(".next").click(function () {
var current = $(".content").css("margin-top") || "0px";
if (parseInt(current.substring(0, current.length - 2)) >=
$(".content").height() * -1 + $(".box").height()) {
$(".content").css(
"margin-top", current.substring(0, current.length - 2) -
$(".box").height() + "px"
);
}
});
$(".prev").click(function () {
var current = $(".content").css("margin-top") || "0px";
if (parseInt(current.substring(0, current.length - 2)) != 0) {
$(".content").css(
"margin-top", parseInt(current.substring(0, current.length - 2)) + $(".box").height() + "px"
);
}
});
</script>
결과보기
(220423) https://stackoverflow.com/questions/2030125
PS. [주의]
contents() 대신 children() 메서드 사용하면, txt += i + '<br>'; 부분을 txt += '<div>' + i + '</div>'; 코드로 변경해야 정상 작동.
- contents() 메서드 - 텍스트와 주석 포함 O 한 모든 자식요소
- children() 메서드 - 텍스트와 주석 포함 X 한 모든 자식요소
