làm cách nào để làm cho nội dung cuộn động trong DIV trên safari của Iphone hoặc webkit của Android?

Question

mã của tôi:

for(var myLine = 0; myLine < 100; myLine++) 
     document.getElementById("myDiv").innerHTML += "line " + myLine + "<br>"; 


............... 

<div style="position:...etc; overflow:auto;" id="myDiv"></div> 

làm việc này mà không có trục trặc ở mọi trình duyệt trên tất cả các nền tảng không di động. Tuy nhiên ... khi điều này được thực hiện trên iPhone (Safari) hoặc Android (webkit) div được lấp đầy với văn bản nhưng không có thanh cuộn được tạo khi văn bản chạy quá chiều cao của div và người dùng không thể "đẩy" nội dung xuống. Vì vậy, tràn hiệu quả luôn luôn là "ẩn" không có vấn đề gì.

Tôi tò mò nếu có một số cách tiếp cận thay thế mà tôi đang xem hoặc nếu đây chỉ là một lỗi tôi không có cách nào để có được xung quanh vào lúc này.

Answer 1

Đây là sự cố đã biết trên webkit di động: http://www.quirksmode.org/webkit.html. Tìm kiếm overflow.

Giải pháp cho điều này là iScroll.

Answer 2

Thực ra, iOS hoạt động chính xác. Người dùng phải sử dụng hai ngón tay để cuộn bất kỳ vùng cuộn nào trên trang không phải toàn bộ trang. (Nếu không thì trình duyệt sẽ biết liệu người dùng có ý định cuộn div hoặc vùng chứa của nó khi cả hai đều lấp đầy màn hình trên trang không được tối ưu hóa.)

Cách tốt nhất để làm việc xung quanh 'tính năng' là triển khai trình xử lý sự kiện chạm di chuyển div lên khi người dùng chạm vào nó. Một ví dụ tuyệt vời về điều này trong thực tế là mã mẫu của Apple FingerTips.

Apple sử dụng kỹ thuật chính xác này khi bạn duyệt qua Safari Developer Library trên iPad.

Answer 3

Tôi nghĩ rằng vấn đề là thiết lập innerHTML và đây là tương tự post.

Chức năng đó có được gọi trên iPhone sau khi dom được tải và sẵn sàng không?