아이폰에서 iframe 스크롤이 동작하지 않을때 해결 방법
Posted at 2015. 1. 29. 11:00 | Posted in 프로그래밍/ASP, Javascript아이폰에서는 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>
'프로그래밍 > ASP, Javascript' 카테고리의 다른 글
자료를 엑셀 다운로드시 문자열로 열 설정하는 방법 (0) | 2017.01.02 |
---|---|
파이어폭스 iframe location 호환성 문제 (0) | 2015.06.15 |
jquery.load()로 불러온 객체가 submit 하면 인식을 못할때 (0) | 2015.01.28 |
자바스크립트로 팝업을 띄었을때 Referer 확인하는 방법 (0) | 2013.08.22 |
ASP에서 maxmind GEOIP 사용하기 (0) | 2012.11.09 |