Bagaimana untuk Menghalang Bar Alamat daripada Bersembunyi dalam Penyemak Imbas Mudah Alih Apabila Menggunakan Kedudukan Mutlak?

Mary-Kate Olsen
Lepaskan: 2024-10-31 06:28:01
asal
561 orang telah melayarinya

How to Prevent the Address Bar from Hiding in Mobile Browsers When Using Absolute Positioning?

Mengatasi Bar Alamat Berterusan dalam Penyemak Imbas Mudah Alih

Adalah perkara biasa bagi tapak web dengan reka letak yang tidak konvensional untuk menghadapi masalah dengan mekanisme penyembunyian automatik bar alamat dalam penyemak imbas mudah alih. Ini boleh mengganggu kefungsian dan mencipta pengalaman pengguna yang tidak diingini.

Masalah:

Tapak web yang sangat bergantung pada kedudukan mutlak dengan JavaScript untuk reka letak mendatar mereka sering menghadapi isu penatalan yang tidak disengajakan . Walaupun elemen berada dalam ketinggian tetingkap, bar alamat kekal tersembunyi, mencetuskan satu siri peristiwa yang tidak diingini:

  • Ubah saiz acara apabila ia tidak sepatutnya
  • Tingkah laku menatal yang salah dalam boleh ditatal secara menegak kandungan

Penyelesaian:

Untuk mengelakkan tingkah laku penyembunyian automatik ini, gabungan sifat CSS boleh digunakan:

CSS Kod:

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}</code>
Salin selepas log masuk

Penjelasan:

  • html { limpahan: tersembunyi; }: Menghalang menatal di luar port pandangan.
  • badan { ketinggian: 100%; }: Memastikan badan mengambil keseluruhan ketinggian port pandangan.
  • badan { kedudukan: tetap; }: Membetulkan badan pada port pandangan, menghalangnya daripada menatal.
  • body { overflow-y: scroll; }: Mendayakan tatal menegak dalam badan.
  • badan { -webkit-overflow-scrolling: sentuh; }: Mengoptimumkan penatalan untuk peranti sentuh iOS.

Penyelesaian ini mengunci bar alamat dengan berkesan dalam keadaan dikembangkannya, membolehkan pengguna menatal dalam kawasan kandungan yang diingini tanpa mencetuskan peristiwa yang tidak diingini atau mengganggu reka letak visual.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Bar Alamat daripada Bersembunyi dalam Penyemak Imbas Mudah Alih Apabila Menggunakan Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan