2010-07-06 30 views
13

Tôi đã biết nhiều thư viện cuộn (TouchScroll, iScroll) dành cho iPhone/iOS do không có khả năng (???) của nó để hỗ trợ tràn: cuộn. Tuy nhiên, tôi không biết (và tôi đang tìm kiếm xác nhận) rằng IFRAME cũng không thực sự hoạt động. Dường như khung nội tuyến không tôn trọng bất kỳ nỗ lực nào để cung cấp cho nó kích thước cố định và luôn tự thay đổi kích thước nội dung của nó. Tôi có đúng về điều này không? Là cách duy nhất để cuộn một IFRAME để đặt nó bên trong một phần tử khối với tập tài sản CSS tràn và sau đó sử dụng một lib như đã nói ở trên?iframe cuộn trên iphone

+0

tôi đã cố gắng không thành công để đạt được một iframe scrolling trên iPhone, và cũng có thể phát hiện ra rằng các iframe bỏ qua bất kỳ cố gắng thiết lập siz của nó e. Bạn đề cập đến việc đặt iframe trong một phần tử khối kết hợp với một thư viện cuộn - đã làm việc này cho bạn như một cách giải quyết? Tôi đã không thành công với bất kỳ cách tiếp cận nào cho đến nay. – James

+0

James, nó vẫn là trường hợp mà bạn "đã thử mà không thành công để đạt được một khung nội tuyến cuộn trên iPhone"? Tôi đã thử nghiệm và googling cho các giải pháp, cũng không thành công. (Lưu ý: một iframe tự nó không hoạt động, nhưng không phải khi tôi kết hợp nó với iscroll/touchscroll/etc) –

Trả lời

1

Bạn có thể cuộn bất kỳ nội dung nào được đặt thành tràn: tự động bằng cách chạm bằng hai ngón tay và kéo. Không đặt iFrame bên trong div với tràn: tự động và thay vào đó đặt iframe thành overflow: tự động. Thật không may, cuộn khung nội tuyến là rất choppy, bất kể nội dung hoặc thiết bị, vì vậy giải pháp tốt nhất là tìm cách làm cho nội dung của bạn vừa với một trang dài, với các div view "top" & "dưới cùng" được đặt để theo dõi chế độ xem (nếu đây là hiệu ứng bạn sẽ làm.)

-4

Câu trả lời không thích: không sử dụng IFRAMES nữa.

+5

-1 html-editors (như tinymce, ckeditor, aso) cần iframe – Thariama

0

Mã bên dưới phù hợp với tôi (nhờ Christopher Zimmermann cho bài đăng trên blog của mình http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). Các vấn đề là: 1. Không có thanh cuộn để người dùng biết rằng họ có thể cuộn 2. Người dùng phải sử dụng cuộn hai ngón tay 3. Tệp PDF không tập trung (vẫn hoạt động trên đó)

<!DOCTYPE HTML> 
    <html> 
    <head> 
     <title>Testing iFrames on iPad</title> 
     <style> 
     div { 
     border: solid 1px green; 
     height:100px; 
     } 

    .scroller{ 
     border:solid 1px #66AA66; 
     height: 400px; 
     width: 400px; 
     overflow: auto; 
     text-align:center; 

    } 
    </style> 

</head> 

<body> 

    <table> 
     <tr> 
     <td><div class="scroller"> 
     <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> 
    </div> 
     </td> 
     <td><div class="scroller"> 
     <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> 
    </div> 
     </td> 
     </tr> 
     <tr> 
     <td><div class="scroller"> 
     <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> 
    </div> 
     </td> 
     <td><div class="scroller"> 
     <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> 
    </div> 
     </td> 
     </tr> 
    </table> 
    <div> Here are some additional contents.</div> 
</body> 
</html> 
7

chỉ đơn giản là thêm ...

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

đến một div xung quanh iframe tôi làm việc cho tôi

+0

làm việc cho tôi, cảm ơn bạn – user1532587

Các vấn đề liên quan