2016-06-13 3 views
1

iFrame에서 Facebook 페이지를 표시하고 작동하도록 설정할 수없는 네이티브 '반송'유형 스크롤을 사용하려고합니다.iOS - iFrame의 기본 스크롤

iframe { 
    overflow-y: scroll !important; 
    -webkit-overflow-scrolling: touch !important; 
} 

을하지만 지금까지 운이 없었을 - 시뮬레이터와 실제 iOS 장비를 모두 테스트 :

나는이 시도했다.

아이디어가 있으십니까? 스크롤바가 dissappear 때까지 내 방법이 될 것입니다

+0

iframe 내부의 페이지 높이를 알고 계십니까? 그 때문에 당신은 iScroll을 사용할 수 있습니다 : http://cubiq.org/iscroll-5 – JoostS

+0

페이지가 페이 스북 페이지에서 뽑혀서 무한히 스크롤되므로 아무런 불행이 없습니다. – dwinnbrown

답변

1

...

1 단계 다음과 같이 iframe을의 크기를 증가 : http://davidjbradshaw.github.io/iframe-resizer/

단계 2. 데이비드 월시 자신의 트릭을 부모 DIV로 그러면 iframe이 스크롤됩니다. https://davidwalsh.name/scroll-iframes-ios

하지만 크로스 도메인 iFrames에 대한 인증 부족으로 인해 실패 할 것이라고 생각합니다.

업데이트 : 상위 div의 스크롤 위치를 기준으로 iframe을 확대하면 어떻게 될까요? 그래서 부모 div가 100 픽셀 스크롤하고 iframe을 100 픽셀 더 크게 만듭니다. iframe의 높이가 무한하고 스크롤 막대가 숨겨져 있다고 가정하면

+0

불행히도, 나는 이미 그것을 시도했습니다 - 뭔가 잘못하고 있어요 : https://jsfiddle.net/0g0xrLy0/ – dwinnbrown

+1

그래프 API와 함께 가서 맞춤식 무언가를 만들어야 할 수도 있습니다 – dwinnbrown

+1

죄송하지만 ... 나도 그렇게 생각합니다. – JoostS

2

Google 팀에서 iOS에 epub3 리더 앱을 제작할 때도 같은 문제가 발생했습니다. .

다음으로 EpubJS v0.3 example을 처리하면 문제를 해결할 수 있습니다.

<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;"> 
    <iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe> 
</div> 

참고 : 여기에

은 예입니다 당신은 iframe이 높이를 계산하고 CSS 스타일을 설정해야합니다 (예 : 8071px). 자바 스크립트를 사용하면 iframe.contentDocument.body.scrollHeight

why we have to set height style을 물어 볼 수 있습니다. some suggestions을 따라하면 동적 콘텐츠 문제를 처리하는 데 도움이되지 않습니다 (문제 here 참조). 높이를 설정하여 사용자의 강조 텍스트를 동적으로 추가하거나 제거 할 수 있습니다.

도움이 되었으면

관련 문제