css menyembunyikan bar skrol tetapi boleh skrol

Dengan pembangunan aplikasi web yang berterusan, reka bentuk web menjadi lebih interaktif. Sebagai elemen interaktif biasa, bar skrol sering digunakan. Tetapi kadangkala, kita mungkin ingin menyembunyikan bar skrol untuk menjadikan halaman kelihatan lebih ringkas dan lebih cantik. Artikel ini akan memperkenalkan cara menggunakan css untuk menyembunyikan bar skrol tetapi masih boleh menatal.

1. Gunakan atribut limpahan CSS

Kita boleh menggunakan atribut limpahan CSS untuk mengawal kandungan limpahan elemen. Atribut limpahan mempunyai tiga nilai parameter: boleh dilihat (nilai lalai), tersembunyi, tatal dan auto.

1. tersembunyi

Nilai atribut ini digunakan untuk menyembunyikan elemen dan sub-elemennya. Jika kandungannya terlalu panjang, ia akan dipotong serta-merta dan disembunyikan di luar kawasan.

2. tatal

Kita boleh menggunakan nilai atribut tatal untuk mencipta bar tatal dalam elemen. Apabila kandungan terlalu panjang untuk dimuatkan pada skrin sekali gus, bar skrol membolehkan kami menatal kesemuanya.

Menggunakan skrol boleh mencapai kesan "sembunyikan bar skrol tetapi masih skrol". Kita boleh menetapkan ketinggian dan lebar tetap dalam elemen, biarkan kandungan melimpah dan gunakan "overflow:scroll" untuk memaparkan bar skrol.

3 auto

Akhir sekali, kami mempunyai nilai atribut "auto". Nilai atribut ini menentukan bahawa penyemak imbas harus menambah bar skrol secara automatik apabila perlu, seperti apabila kandungan terlalu besar. Apabila kandungan tidak melebihi bekas, bar skrol tidak akan muncul.

2. Sembunyikan bar skrol

Oleh itu, kita boleh menggunakan "overflow:hidden" untuk menyembunyikan bar skrol. Ini akan menyembunyikan bar skrol kami dan melumpuhkan penatalan.

.Sembunyikan bar skrol {
limpahan: tersembunyi;
}

Walau bagaimanapun, dalam kes ini kita tidak boleh menatal kandungan melalui bar skrol. Oleh itu, kita perlu menggunakan kaedah lain untuk mencapai kesan yang diinginkan. Berikut ialah contoh asas yang menggunakan "overflow:hidden" untuk menyembunyikan bar skrol.

3. Masih boleh scroll

Soalan seterusnya ialah bagaimana untuk menjadikan kandungan masih boleh discroll. Kami boleh menggunakan JavaScript untuk menyelesaikan masalah ini. Kami perlu mengesan jenis peranti yang digunakan oleh pengguna memandangkan bar skrol boleh dilihat pada peranti mudah alih.

Berikut menyediakan kaedah yang membolehkan kita mengawal kelakuan bar skrol. Ia bergantung pada perpustakaan jQuery.

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 ||. navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} lain {

$('body').css('overflow-y', 'scroll');

}
});

Kod ini akan membolehkan bar skrol standard apabila kami menyemak imbas pada PC atau peranti Android. Pada peranti Apple, ia akan menggunakan bar skrol yang serupa, tetapi meniru bar skrol iOS asli. Kita boleh menatal kandungan dengan menyentuh bar skrol atau halaman.

Sudah tentu, ini bukan satu-satunya cara. Kami juga boleh mencapai kesan serupa melalui CSS tanpa bergantung pada JavaScript. Kita boleh menetapkan ketinggian dan lebar elemen, menyembunyikan bar skrol menggunakan "overflow:hidden", dan kemudian membolehkan penatalan inersia menggunakan "-webkit-overflow-scrolling:touch".

Dayakan tatal inersia {
tinggi: 100%;
lebar:
limpahan: disembunyikan;

4. Kesimpulan

Dalam artikel ini, kami belajar cara menggunakan CSS untuk menyembunyikan bar skrol tetapi masih boleh menatal. Kami telah membincangkan dua cara untuk mencapai kesan ini menggunakan atribut limpahan dan JavaScript. Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri. Keputusan akhir bergantung pada keperluan anda. Jika anda memerlukan penyelesaian yang lebih fleksibel dan mudah alih, gunakan JavaScript. Jika anda hanya perlu menyembunyikan bar skrol dan masih boleh menatal, gunakan CSS.

Atas ialah kandungan terperinci css menyembunyikan bar skrol tetapi boleh skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!