Bagaimana untuk mencapai kesan menatal melalui CSS

Dalam reka bentuk web, kesan tatal adalah kesan yang sangat biasa Tatal boleh menjadikan halaman web lebih jelas dan dinamik. Dalam CSS, menetapkan kesan tatal juga merupakan kemahiran yang agak asas. Artikel ini akan memperkenalkan anda kepada cara untuk mencapai kesan menatal melalui CSS.

1 Gunakan atribut limpahan untuk menetapkan bar skrol

Dalam CSS, atribut limpahan boleh digunakan untuk menetapkan mod paparan bar skrol, termasuk: tatal, auto, tersembunyi dan nampak. Antaranya, tatal bermaksud memaksa bar skrol untuk dipaparkan;

Contohnya:

div {
  width:300px;
  height:100px;
  overflow:scroll;
}

Kod di atas bermaksud menetapkan bekas div dengan lebar 300px dan ketinggian 100px Apabila kandungan melebihi ketinggian bekas, bar skrol akan dipaparkan.

2. Aplikasi::-webkit-scrollbar pseudo-class untuk mencantikkan bar skrol

Walaupun atribut limpahan boleh memaparkan bar skrol, gaya bar skrol lalai mungkin bukan seperti yang kita mahu. Pada masa ini, kita boleh menggunakan pilihan kelas pseudo::-webkit-scrollbar dalam CSS untuk mencantikkan gaya bar skrol. Perlu diingat bahawa kelas pseudo ini hanya terpakai kepada penyemak imbas dengan teras WebKit (seperti Chrome, Safari, dll.).

Berikut ialah contoh kod:

div {
  width:300px;
  height:100px;
  overflow:scroll;
}
div::-webkit-scrollbar {
  width:10px;
  height:10px;
}
div::-webkit-scrollbar-thumb {
  background-color:rgba(0,0,0,0.5);
  border-radius: 5px;
}
div::-webkit-scrollbar-track {
  background-color:rgba(0,0,0,0.2);
  border-radius: 5px;
}

Dalam kod di atas, gaya keseluruhan bar skrol ditetapkan dengan menetapkan div::-webkit-scrollbar, termasuk lebar dan ketinggian bar skrol. Tetapkan gaya peluncur bar skrol dengan menetapkan div::-webkit-scrollbar-thumb, termasuk warna latar belakang dan jejari sudut peluncur. Tetapkan gaya trek bar skrol dengan menetapkan div::-webkit-scrollbar-track, termasuk warna latar belakang dan jejari sudut trek.

3. Gunakan JS untuk mencapai kesan tatal

Selain dua kaedah di atas, menggunakan JS juga merupakan cara untuk mencapai kesan tatal. Melalui acara tatal JS, beberapa peristiwa boleh dicetuskan apabila menatal halaman. Contohnya:

window.addEventListener('scroll', function(e) {
  console.log(window.scrollY);
});

Kod di atas menunjukkan bahawa apabila tetingkap menatal, cetak jarak tatal menegak tetingkap semasa.

Selain itu, anda juga boleh menggunakan beberapa pemalam untuk mencapai kesan tatal yang lebih kaya, seperti fullPage.js, ScrollReveal, dsb.

Ringkasan

Melalui pengenalan di atas, saya percaya semua orang mempunyai pemahaman yang lebih mendalam tentang menetapkan gaya tatal dengan CSS. Menggunakan CSS untuk menetapkan bar skrol ialah kemahiran penting dalam reka bentuk web, yang menjadikan halaman web lebih jelas dan dinamik. Dan JS juga menyediakan cara untuk kita mencapai kesan tatal yang lebih kaya. Marilah kita menggunakannya secara fleksibel dalam pembangunan sebenar, menguasai lebih banyak kemahiran dan menjadikan reka bentuk web lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan menatal melalui CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!