[js-infinity scroll] 동적 추가 요소에 대한 이벤트 꼬임 조언 부탁드립니다ㅠ [해결왼료]

Question

안녕하세요.인피니티 스크롤을 구현중에있습니다.예를들어 높이 100짜리 리스트 100개의 정보가 담겨있는 데이터에서첫 홈페이지 진입시뷰포트 높이(1000이라고 가정) / 리스트 높이(100) = 1010 + (10/2); 정도해서 13인치 노트북부터 27~32인치 모니터까지 동적으로 갯수를 조절해서 뿌려주고,리스트 최하단이 아니라 리스트 중간쯤 오면 딜레이없이 다음 리스트를 뿌려주도록 구현을 하였습니다. 이걸 구현 후 버그가 생겼습니다..ㅠㅠ각 리스트는 아코디언메뉴 이기에 각 리스트마다 click 이벤트와 열리는 리스트를 화면 상단으로 끌어올리기 위해 scrollTo기능도 같이 걸려있습니다. 첫 로드되는(위에서 얘기한 계산으로) 리스트들은 이벤트가 잘 작동하지만 스크롤 하다 추가되는 리스트들이랑 첫 리스트들이랑 이벤트가 꼬였습니다... 콘솔에 에러가 안나와서, 여기저기 찍어보니 리스트를 추가하면서 이벤트 함수가 한번 더 재실행돼서 초기에 로드됐던 리스트들은 함수가 중복돼서 실행이 안되는거같아요.. 추가된 리스트는 작동합니다. 첫 로드된 리스트에서도 이벤트가 정상 작동하다가 이후 추가된 리스트에도 동일한 이벤트를 문제없이 실행 시키고 싶은데, 혼자 이것저것 해보다 방향이 안잡혀서 질문드립니다. 전체 코드를 보여드리진 못하지만 혹시 조언해주시는데 참고가 될까싶어 일부 첨부합니다const addList = () => { ...(for문으로 만들어서 뿌려줌) }, const io = new IntersectionObserver(([entry], observer) => { if (!entry.isIntersecting) return addList(++pageNum); observer.unobserve(entry.target); ioReStart(observer); accordion.open(); }, { threshold: 0.1 }); const ioReStart = (intersectionObserver) => { const lists = document.querySelectorAll(".list"); lists.forEach(list => { if (!list.nextSibling && pageNum < Math.ceil(data.length/listLength)) { intersectionObserver.observe(list) } else if (pageNum >= Math.ceil(data.length/listLength)) { intersectionObserver.disconnect() } }) } addList(); ioReStart(io); accordion.open(); const accordion = { open: () => { const lists = document.querySelectorAll('.list'); lists.forEach(list => { const tooltip = document.querySelector('.tooltip_box'); const btn = list.querySelector("button"); const detail = list.querySelector(".detail"); btn.addEventListener('click', () => { console.log(detail) if (!detail.classList.contains("open")) { accordion.clear(); openD(); detail.classList.add("open"); } else { closeD(); detail.classList.remove("open"); } gsap.to(tooltip, { duration: 0.3, opacity: 0, display: "none" }) }); const openD = () => { const tl = gsap.timeline(); return tl .to(btn, { duration: 0.5, "--width": "100%", ease: "expo.in", }) .to(detail, { force3D: true, duration: 0.4, height: detail.scrollHeight + "px", borderWidth: 2, ease: "power4.inOut", }, "<") } const closeD = () => { const tl = gsap.timeline(); return tl .to(btn, { duration: 0.5, "--width": "0%", ease: "expo.in" }) .to(detail, { duration: 0.4, height: 0, borderWidth: 0, ease: "power4.inOut" }, "<"); } }); }, clear: () => { const lists = document.querySelectorAll('.list'); lists.forEach(list => { const btn = list.querySelector("button"); const detail = list.querySelector(".detail"); if (!detail.classList.contains("open")) return; const tl = gsap.timeline(); tl .to(btn, { duration: 0.5, "--width": "0%", ease: "expo.in" }) .to(detail, { duration: 0.4, height: 0, borderWidth: 0, ease: "power4.inOut" }, "<"); detail.classList.remove("open"); }); } } 제가 설명을 잘 했는지 모르겠지만... 혹시 조언 해주시려는데 이해가 잘 안가신다면 답글 부탁드리겠습니다.감사합니다.

올림픽대로 · Answer

삽질 더 하다보니 되네요..ㅋㅋㅋhttps://programmingsummaries.tistory.com/313위 링크중에서 stopImmediatePropagation()참고했습니다https://developer.mozilla.org/ko/docs/Web/API/Event/stopImmediatePropagation

[js-infinity scroll] 동적 추가 요소에 대한 이벤트 꼬임 조언 부탁드립니다ㅠ [해결왼료]

1개의 답변

Q&A 목록