pop up 창의 스크롤 문제

과제 : popup 내부에 컨텐츠를 좌우로 나뉘어 각각의 스크롤이 작동하게 하기

---

현상 :

• popup창의 스크롤이 아닌 뒷 배경의 스크롤이 작동하는 것.때문에 뒷 배경이 일부 보임.
• ios에서 popup 의 스크롤을 인식하지 못해 하단에 있는 주소창와 popup창의 일부 내용이 겹쳐져서 내용이 가림.

---

해결법 :

• 뒷 배경의 스크롤이 동작하지 않도록 height 값을 주고 overflow : hidden 처리
  • height: 100%;
  • overflow-y : hidden;
• popup창의 전체 높이값을 제대로 인식하도록 다음과 같은 옵션을 썼다. (ios 를 위해서 사용)
  • min-height: -webkit-fill-available; (popup 창에 사용)
• 각각의 스크롤이 부착될 height에 높이값을 주고, overflow 와 scrolling을 줌
  • height: 100%; (높이값주기)
  • overflow-y: scroll
  • -webkit-overflow-scrolling : touch ; ( ios에서 이거 삽입하니깐 popup 내부 스크롤을 인식해서 하단부 주소창과 popup 내용이 겹쳐지지 않았음.)

---

배운것

• (스크롤이 들어있는) 여러 레이어가 겹쳐질 경우,  스크롤이 동작할 레이어 외에 다른 레이어는 다 scroll을 막자. 
• ios 경우, 하단부의 주소입력창이 컨텐츠와 겹친다. (스크롤이 있는) 컨텐츠내부에 -webkit-overflow-scrolling : touch를 설정하면, 주소입력창과 겹쳐지지 않도록 높이값을 잡아준다.
• 브라우저가 제공하는 디버깅 메뉴 "레이어"를 통해 스크롤이 움직일 때, 모습을 볼수 있다. 이를 통해 원인파악을 빨리 할 수 있다.