• HTML
  • JS
  • J볃교

스크롤 내렸을 시 내용더 불러오기

2019-05-24 554

설명

  • 카카오톡 링크

게시판이나 내용이나 상품이나 내용을 더 불러오기 위한 소스입니다~!

예제 사이트

※ajax 안에 ajax 를 사용하여 정상적으로 작동하지 않습니다. 위에있는 예제 사이트 참고 부탁드리겠습니다~!

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	.invest_list {font-size:0; text-align:center}
	.invest_box {position:relative; display:inline-block; width:31.333%; height:50px; padding-bottom:25%; margin-left:3%; background-color:#f2849e; border-radius:5px; margin-bottom:3%; text-align:center; font-size:16px; font-weight:400; color:#fff; }
	.invest_box span {position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); line-height:1.4em; box-sizing:border-box; padding:0 15px}
	.invest_box.invest_item1 {margin-left:0}
	.txt_center {text-align:center}
	.invest_plus {display:inline-block; width:180px; height:48px; line-height:46px; background-color:#f2849e; color:#fff; border-radius:5px; }
	.loading_img {display:none}
	.loading_img.on {display:block}

	@media screen and (max-width:1024px) { 
		.invest_box span {font-size:14px;}
		.invest_box span .mobile_none {display:none}
	}

	@media screen and (max-width:768px) { 
		.invest_box span {font-size:12px;}
	}
</style>

<div class="invest_list">
	<div class="invest_box invest_item1">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
	<div class="invest_box invest_item2">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
	<div class="invest_box invest_item3">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
	<div class="invest_box invest_item1">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
	<div class="invest_box invest_item2">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
	<div class="invest_box invest_item3">
		<span>총 갯수 12개 까지 보여지게끔 되어있습니다<br /> 모니터가 클경우 스크롤이 안될 수 있으니<br class="mobile_none" /> 참고 부탁드리겠습니다.</span>
	</div>
</div>

<div class="loading_img txt_center">
	<img src="/img/invest_loading_img.gif" alt="로딩이미지" title="로딩이미지" />
</div>



<script type="text/javascript">
	var maxlength = 2;
	var start_number = 0;

	window.onload = function () { 
		var minus_scroll = '100';
		$(window).scroll(function() {
			var st = $(window).scrollTop();	
			var dh = $(document).height();
			var wh = $(window).height();
			if (st >= ((dh - wh) - minus_scroll)){
				scroll_plus();
			}
		});
	}


	function scroll_plus() {
		start_number = start_number + 1;
		if(start_number > maxlength) {
			return false;
		}
		$(".loading_img").stop().fadeIn("fast");
		$(".load_btn_box").fadeOut("fast");
		$.ajax({
			url: './ajax_invest_list.php', //주소
			type: 'post', // get 또는 post 방식으로
			data: {
				// 보낼 데이터
				length : maxlength
			},
			success : function(data, status, xhr) { 
				//성공시 동작
				
				$(".invest_list").append(data);
				$(".loading_img").stop().fadeOut("fast");
				if(start_number >= maxlength) {
					$(".load_btn_box").fadeOut("fast");
					return false;
				}
				$(".load_btn_box").fadeIn("fast");
				
			},

			fail: function(error) {
				// 실패 시 동작
			},
			always: function(response) {
				// 성공하든 실패하든 항상 할 동작
			}
		});
	}

	/*  ajax_invest_list.php 내용

	<div class="invest_box invest_item1">
	</div>

	<div class="invest_box invest_item2">
	</div>

	<div class="invest_box invest_item3">
	</div>
	
	*/
</script>