Mặc dù thuộc tính CSS {position:fixed;}dường như (chủ yếu) hoạt động trên các thiết bị iOS mới hơn, nhưng có thể khiến thiết bị không hoạt động và dự phòng {position:relative;}theo thời gian và không có lý do hoặc lý do. Thông thường, việc xóa bộ nhớ cache sẽ giúp ích, cho đến khi có điều gì đó xảy ra và việc giải quyết lại xảy ra.
Cụ thể, từ chính Apple Chuẩn bị nội dung web của bạn cho iPad :
Safari trên iPad và Safari trên iPhone không có cửa sổ có thể thay đổi kích thước. Trong Safari trên iPhone và iPad, kích thước cửa sổ được đặt thành kích thước của màn hình (trừ điều khiển giao diện người dùng Safari) và người dùng không thể thay đổi. Để di chuyển xung quanh một trang web, người dùng thay đổi mức thu phóng và vị trí của chế độ xem khi họ chạm hai lần hoặc chụm để phóng to hoặc thu nhỏ hoặc bằng cách chạm và kéo để xoay trang. Khi người dùng thay đổi mức thu phóng và vị trí của chế độ xem, họ sẽ làm như vậy trong một khu vực nội dung có thể xem được với kích thước cố định (nghĩa là cửa sổ). Điều này có nghĩa là các thành phần trang web có vị trí "cố định" với chế độ xem có thể kết thúc bên ngoài khu vực nội dung có thể xem, ngoài màn hình.
Thật là mỉa mai, các thiết bị Android dường như không có vấn đề này. Ngoài ra, nó hoàn toàn có thể sử dụng {position:absolute;}khi tham chiếu đến thẻ body và không có bất kỳ vấn đề nào.
Tôi đã tìm ra nguyên nhân sâu xa của việc giải quyết vấn đề này; rằng đó là sự kiện cuộn không chơi đẹp khi được sử dụng cùng với thẻ HTML hoặc BODY. Đôi khi nó không muốn kích hoạt sự kiện, hoặc bạn sẽ phải đợi cho đến khi sự kiện cuộn cuộn kết thúc để nhận sự kiện. Cụ thể, chế độ xem được vẽ lại vào cuối sự kiện này và các yếu tố cố định có thể được định vị lại ở một nơi khác trong chế độ xem.
Vì vậy, đây là những gì tôi làm: ( tránh sử dụng chế độ xem và gắn bó với DOM! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
Về bản chất, điều này sẽ làm cho BODY có kích thước của khung nhìn và không thể cuộn được. DIV có thể cuộn được lồng bên trong sẽ cuộn như BODY thông thường (trừ hiệu ứng xoay, do đó, cuộn không dừng trên touchend.) DIV cố định vẫn cố định mà không bị nhiễu.
Là một lưu ý phụ, z-indexgiá trị cao trên DIV cố định rất quan trọng để giữ DIV có thể cuộn xuất hiện ở phía sau nó. Tôi thường thêm vào thay đổi kích thước cửa sổ và cuộn các sự kiện cũng để tương thích với trình duyệt chéo và tương thích độ phân giải màn hình.
Nếu vẫn thất bại, đoạn mã trên cũng sẽ hoạt động với cả DIV cố định và có thể cuộn được đặt thành {position:absolute;}.