html lumpuhkan gelongsor

HTML melarang gelongsor - bagaimana untuk melaksanakannya?

Dalam reka bentuk dan pembangunan web, gelongsor ialah kaedah interaksi yang penting. Walau bagaimanapun, dalam beberapa kes, kami ingin melarang halaman web meluncur Keperluan ini sering dilihat dalam senario berikut:

1. Apabila halaman web muncul, kami tidak mahu pengguna melihat halaman web. kandungan dengan meluncur;
2. Dalam beberapa senario aplikasi khas, pengguna perlu dilarang daripada meluncur halaman.

Jadi, bagaimana untuk mengelakkan gelongsor dalam HTML? Artikel ini akan memperkenalkan dua kaedah kepada anda.

Kaedah 1: Gunakan sifat CSS

Dalam fail CSS, kita boleh menggunakan pernyataan berikut untuk melumpuhkan gelongsor:

body{
   overflow: hidden;
}

Kod CSS ini menyembunyikan bar skrol halaman , Ini mencapai kesan melarang gelongsor. Kaedah ini sesuai untuk situasi di mana tetingkap bersaiz tetap perlu muncul di tengah-tengah halaman untuk melarang pengguna daripada terus meluncur dan menyemak imbas.

Bagaimanapun, kaedah ini juga mempunyai beberapa kelemahan. Ia hanya menyembunyikan bar skrol, tetapi tidak melarang pengguna daripada menatal halaman Jika pengguna menggunakan papan kekunci atau roda tetikus untuk meluncur, masalah masih akan berlaku.

Kaedah 2: Gunakan kod JavaScript

Selain menggunakan sifat CSS, kami juga boleh menggunakan kod JavaScript untuk menghalang HTML daripada meluncur.

var scrollTop;
function stopScroll(){
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.overflow='hidden';
    document.body.style.position='fixed';
    document.body.style.top=-scrollTop+'px';
}
function allowScroll(){
    document.body.style.overflow='auto';
    document.body.style.position='';
    document.body.style.top='';
    document.body.scrollTop = scrollTop;
    document.documentElement.scrollTop = scrollTop;
}

Kod di atas mentakrifkan dua fungsi stopScroll() dan allowScroll(), yang digunakan untuk berhenti dan membenarkan gelongsor halaman masing-masing. Antaranya, fungsi stopScroll() digunakan untuk melarang menatal halaman, dan fungsi allowScroll() digunakan untuk memulihkan fungsi menatal halaman.

Kaedah ini boleh melarang sepenuhnya pengguna daripada meluncur pada halaman, dan juga memastikan kedudukan gelongsor pengguna dipulihkan sebelum halaman dimuatkan.

Walau bagaimanapun, sila ambil perhatian bahawa kaedah ini mungkin tidak sesuai untuk semua senario aplikasi dan penyemak imbas. Sesetengah penyemak imbas mungkin tidak menyokong JavaScript sepenuhnya, menyebabkan kod ini tidak berfungsi dengan betul.

Kesimpulan

Melumpuhkan gelongsor dalam HTML ialah keperluan reka bentuk web yang biasa. Artikel ini menerangkan dua kaedah berbeza, menggunakan sifat CSS dan kod JavaScript. Pembaca boleh memilih kaedah yang sesuai untuk melarang halaman gelongsor mengikut keperluan sebenar pada masa yang sama, mereka juga harus memberi perhatian kepada batasan kaedah dan keserasian pelayar.

Atas ialah kandungan terperinci html lumpuhkan gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!