아이폰에서는 iframe의 스크롤 기능이 동작을 하지 않는다. 이때는 다음과 같이 해결한다.

css는

.scrollable {

  overflow: auto; -webkit-overflow-scrolling: touch;

}

<div id="zipcodeLayer" style="position:fixed; top:0; left:0; right:0; class="scrollable">

<iframe src="zipcode.asp" frameborder="0" width="100%" height="100%"></iframe>

</div>


iframe을 div로 감싸고 overflow: auto; -webkit-overflow-scrolling: touch; 를 먹여주는게 핵심이다.


그런데 만약에 div의 사이즈를 고정시키기 위해 아래와 같이 했을때

<div id="zipcodeLayer" style="position:fixed; top:0; left:0; right:0; class="scrollable; width=100%; height=70%">

<iframe src="zipcode.asp" frameborder="0" width="100%" height="100%"></iframe>

</div>


iframe의 내용이 div 에서 지정한 70%보다 작아서 최초 동작시 스크롤이 생기지 않는다면 스크롤이 안되는 문제가 발생한다.

따라서 iframe이 만들어 질때 스크롤을 강제로 생성시키기 위해 height="101%"로 변경을 해주면 문제가 해결된다.

따라서 완성된 최종 코드는 아래와 같다.

<div id="zipcodeLayer" style="position:fixed; top:0; left:0; right:0; class="scrollable; width=100%; height=70%">

<iframe src="zipcode.asp" frameborder="0" width="100%" height="101%"></iframe>

</div>



저작자 표시 비영리 변경 금지
신고

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기