아이폰에서 iframe 내용에 스크롤이 되지 않을때.

아이폰으로 모바일웹을 사용하는대 필요에 의해서 iframe 을 넣어서 사용하였다.

 

그런대 iframe 내용이 길게 되어 스크롤이 되어야하는대 parent 때문인지 스크롤이 되지 않아 밑부분을 볼수가 없다.

 

안드로이드 폰이나 pc 에서 확인하면 정상적인대...

 

문제를 해결하고자 구글링을 하다가 다음과 같은 해결책을 발견하였다.

 

 

Place your <iframe>s in wrappers with -webkit-overflow-scrolling: touch;

 

iframe 을 감싸고 -webkit-overflow-scrolling: touch; 스타일을 주는것이다.

 

#outside {
  height: 400px;
  width: 200px;
  background: blue;
  overflow: scroll;
}

.space {
  height: 200px;
  width: 200px;
  background: red;
}

iframe {
  height: 1000px;
  width: 200px;
  background-color: green;
  border: none;
  display:block;
}

iContainer {
  -webkit-overflow-scrolling: touch;
}

 

<div id="outside">
  <div class="space"></div>
  <div class="iContainer">
    <iframe>
    </iframe>
  </div>
  <div class="space"></div>
</div>

이것처럼 하니 해결되었다.

 

참고주소는 https://stackoverflow.com/questions/44423506/ios-mobile-scrolling-in-iframe-within-scroll-able-parent

 

다른 참조사항 https://stackoverflow.com/questions/26176288/webkit-overflow-scrolling-touch-breaks-in-apples-ios8