모달 content 에 infinite-scroll 적용시 이슈

[kieregh]

이슈

작업상황 :
id="myModal" 이라는 모달 하나에 아래의 템플들을 불러오는 상황.
- 회원 리스트 ( 무한스크롤 적용)
- 설정 페이지 ( 무한 스크롤 불필요)

현상 :

1. '회원 리스트'를 불러와서 무한 스크롤 실행(정상작동)
2. '설정 페이지' 호출했더니 이 페이지에서도 무한 스크롤이 작동됨.

원인

• 최초 '회원 리스트' 에서 .content 에 무한 스크롤을 초기화했는 모달이 닫히면서 .content 내부 영역만 삭제가 되어 다른 내용이 호출되어도 .content 에 초기화된 무한 스크롤이 작동되는 현상

고려사항

모달의

부분까지 모두 삭제 즉, <div class="modal"></div> 내부 전체를 삭제하는 경우에는 본 이슈가 발생하지 않을 수 있으나 이렇게 할 경우 각 템플릿에 똑같은 를 추가해줘야 하는 이슈 발생. 실제 작업시 값은 동적으로 변경하고 content 영역에 템플릿(페이지)을 호출하고 있음.

제안

• scroll 대상 전용 div 에 대한 class 및 css 추가(content 와 같은 속성으로 scroll 이 가능하도록)
• 이렇게 하면...스크롤이 필요한 템플릿에서 이 scroll 전용 div 로 wrapping 을 해주고 해당 모달이 닫히면서 해당 scroll 전용 div 도 삭제되므로 본 이슈는 발생하지 않을 것으로 판단됨.

이상입니다.