Bagaimanakah Saya Boleh Mencegah Penatalan Terlebih Dahulu pada Halaman Web Saya?

Mencegah Penatal Terlebih dalam Halaman Web

"Tatal Terlebih" ialah ciri dalam penyemak imbas moden yang membolehkan pengguna menatal melepasi hujung halaman web , mendedahkan sekilas kandungan asas. Walaupun kesan ini boleh berguna dalam sesetengah senario, ia juga boleh menjengkelkan atau mengelirukan pada orang lain.

Jika anda ingin melumpuhkan penatalan berlebihan pada halaman web anda, terdapat dua pendekatan utama:

Kaedah 1: Lumpuhkan Tatal Terlebih Sepenuhnya

Penyelesaian yang diterima yang dicadangkan dalam urutan forum yang anda pautkan tidak berfungsi untuk semua pengguna. Walau bagaimanapun, kaedah yang lebih dipercayai ialah menggunakan peraturan CSS berikut:

<code class="css">html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}</code>

Kod ini menghalang penatalan berlebihan dengan mengehadkan kandungan yang melimpah dalam tetingkap penyemak imbas. Ia menetapkan sifat limpahan elemen html kepada tersembunyi, yang menyembunyikan sebarang kandungan yang melangkaui julat bar skrol. Sifat limpahan elemen badan ditetapkan kepada automatik, membenarkan tatal menegak dalam halaman itu sendiri tetapi menghalangnya daripada melepasi tetingkap penyemak imbas.

Kaedah 2: Kawal Tatal Terlebih untuk Elemen Tertentu

Jika anda hanya mahu melumpuhkan penatal berlebihan untuk elemen tertentu pada halaman anda, anda boleh menggunakan sifat -webkit-overflow-scrolling. Sifat ini disokong oleh Chrome, Safari dan penyemak imbas lain yang menggunakan enjin pemaparan WebKit:

<code class="css">.my-container {
    -webkit-overflow-scrolling: touch;
}</code>

Tetapan -webkit-overflow-scrolling untuk menyentuh menghalang penatal berlebihan dalam elemen itu sendiri, membolehkan pengguna menatal dengan lancar dalam bekas tertentu itu tetapi tidak melepasi sempadannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Penatalan Terlebih Dahulu pada Halaman Web Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!