728x90
화면에서 특정 div 영역에서 상품들이 나열되어 있을 때
추가로 상품을 append 해야 하는대 스크롤이 해당 상품 리스트 영역의 하단에 왔을 때 이벤트를 발생시켜서
상품을 추가하고 싶을 때 사용
- 영역들이 여러개 존재할 수 있고 유동적으로 생성될때도 적용할 수 있게 구성
- data-prdappendyn="N" 는 추가적으로 더 이벤트를 발생시킬지 여부를 판단. 상황에 따라 추가할 내용이 없으면 값을 변경
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="point_prdlist_area" data-prdappendyn="N">
...
상품들
...
</div>
<div class="point_prdlist_area" data-prdappendyn="N">
...
상품들
...
</div>
<div class="point_prdlist_area" data-prdappendyn="N">
...
상품들
...
</div>
</body>
</html>
- 스크롤링이 발생하면 이벤트 실행
- 현재 document 의 스크롤 위치값을 설정 +200 은 영역의 하단이 화면의 밑에 있을 때를 계산. 상황에 따라 사용자별로 다르게 변경하면서 원하는 위치를 체크
- 영역의 위치값이 현재의 위치보다 크면 이벤트를 발생. prdappendyn 값에 따라서 이벤트 실행여부 결정
<script>
$(document).ready(function(){
// 스크롤 이벤트
$(window).scroll(function(){
// 화면 위치
var height = $(document).scrollTop();
height = height + 200;
$(".point_prdlist_area").each(function (index){
var pointPrdlistArea = $(this).data("prdappendyn");
var here = $(this).offset().top;
if(here < height){
if (pointPrdlistArea == 'N'){
// 상품추가 로직
alert("상품추가 로직");
// 플래그값 변경 여부 결정
$(this).data("prdappendyn", "Y");
}
}
});
})
})
</script>LIST
'Develop' 카테고리의 다른 글
| [타임리프 Thymeleaf] 반복문 while 같은 단순반복 처리 (4) | 2024.09.11 |
|---|---|
| [javascript] jquery selector 선택자 like 로 찾기 (10) | 2024.09.10 |
| [Thymeleaf 타임리프] ModelAndView 리턴페이지에서 특정 id 영역만 변경하고 싶을 때 (12) | 2024.09.05 |
| [Mybatis] PK 를 count 혹은 max 쿼리로 생성 후 리턴받기 (16) | 2024.09.03 |
| [Mybatis] 반복되는 같은 쿼리 sql 로 정의해서 include 해서 변수처럼 사용하기 (3) | 2024.09.03 |