Bagaimana untuk Melaksanakan Div Mengunci Tatal dalam Safari Mudah Alih?

Div Mengunci Tatal dalam Safari Mudah Alih

Walaupun sifat "kedudukan: tetap" untuk elemen ialah pendekatan biasa untuk kedudukan tetap, ia menghadapi batasan dalam Safari Mudah Alih. Walau bagaimanapun, penyelesaian bijak muncul daripada Gmail, mempamerkan bar menu terapung dalam paparan mesej.

Teknik ini melibatkan mencipta div dengan kedudukan tetap dan menggunakan acara window.onscroll JavaScript untuk mengemas kini sifat teratasnya pada tatal. Begini cara ia berfungsi:

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top = 
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Kod JavaScript ini terikat pada acara tatal tetingkap dan melaraskan sifat teratas elemen "fixedDiv". Pengiraan memastikan div kekal di bahagian bawah halaman, tanpa mengira kedudukan tatal.

Pendekatan ini terbukti amat berguna apabila mencipta elemen yang berterusan pada skrin semasa pengguna menatal kandungan. Sama ada untuk menu terapung, bar kemajuan atau komponen interaktif lain, teknik ini menyediakan penyelesaian yang boleh dipercayai untuk kedudukan tetap dalam Safari Mudah Alih.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Div Mengunci Tatal dalam Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!