Bagaimana untuk Meletakkan Elemen di Bahagian Bawah Viewport dalam Safari Mudah Alih?

Elemen Kedudukan di Bahagian Bawah Port Pandangan dalam Safari Mudah Alih

Pendekatan konvensional untuk mencapai kedudukan tetap, seperti menggunakan kedudukan: tetap, mempunyai terbukti tidak berkesan untuk Mobile Safari. Walau bagaimanapun, penyelesaian inovatif telah muncul, termasuk bar menu terapung Gmail, yang melabuhkan elemen secara berkesan pada port pandangan.

Satu pendekatan yang berdaya maju ialah menggunakan JavaScript untuk memantau acara tatal masa nyata. Dengan memanfaatkan pendengar tatal, pembangun boleh melaraskan kedudukan elemen secara dinamik berdasarkan gelagat tatal pengguna. Khususnya, skrip berikut boleh digunakan untuk memastikan elemen tertentu kekal di bahagian bawah halaman pada tatal:

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

Dalam coretan kod ini, pengendali acara onscroll dilampirkan pada objek tetingkap, memastikan pemantauan berterusan aktiviti menatal. Pada setiap acara tatal, sifat style.top bagi elemen dengan ID fixedDiv diubah suai.

Nilai yang diberikan kepada style.top mengambil kira kedudukan skrol menegak semasa (window.pageYOffset), tetingkap penyemak imbas ketinggian (window.innerHeight), dan ofset tetap 25 piksel. Strategi penentududukan ini memastikan bahawa elemen kekal pada kedudukan di bahagian bawah halaman semasa pengguna menatal, mewujudkan kesan relatif port pandangan tetap.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Elemen di Bahagian Bawah Viewport dalam Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!