Bagaimana untuk menyembunyikan bar skrol menggunakan HTML dan CSS

Bar skrol ialah elemen yang sangat biasa dalam reka bentuk web, tetapi kadangkala kami ingin menyembunyikan bar skrol dan menggunakan kaedah lain untuk mencapai penatalan. Artikel ini akan memperkenalkan cara menyembunyikan bar skrol menggunakan HTML dan CSS.

Pertama, kita perlu memahami cara bar skrol dijana. Dalam HTML, apabila kandungan melebihi kawasan yang boleh dilihat, penyemak imbas secara automatik menjana bar skrol. Penampilan dan kelakuan bar skrol ditentukan oleh sistem pengendalian dan penyemak imbas, dan penyemak imbas dan sistem pengendalian yang berbeza mungkin mempunyai gaya bar skrol yang berbeza.

Untuk menyembunyikan bar skrol, kita perlu menggunakan CSS untuk mengawal gaya kawasan skrol. Kita boleh menggunakan sifat limpahan dalam CSS untuk mengawal limpahan kandungan, dan menggunakan ::-webkit-scrollbar pseudo-element untuk mengawal gaya bar skrol.

Mula-mula, mari kita lihat cara menggunakan atribut limpahan untuk menyembunyikan bar skrol. Kita boleh menetapkan sifat limpahan bekas di mana bar skrol perlu disembunyikan untuk disembunyikan. Dengan cara ini, apabila kandungan melimpah, penyemak imbas tidak akan menjana bar skrol, tetapi kandungan masih boleh ditatal.

Sebagai contoh, kod berikut boleh digunakan untuk menyembunyikan bar skrol elemen div:

<div style="height: 200px; width: 200px; overflow: hidden;">
  ...
</div>

Kami boleh menetapkan atribut limpahan kepada auto dan bukannya tersembunyi, supaya kandungan hanya akan dipaparkan apabila ia melimpah Tunjukkan bar skrol. Kemudian kita boleh menggunakan ::-webkit-scrollbar pseudo-element dalam CSS untuk mengawal gaya bar skrol.

Berikut ialah contoh kod:

<style>
  .scrollbar-container {
    height: 200px;
    width: 200px;
    overflow: auto;
  }
  
  .scrollbar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
  }
  
  .scrollbar-container::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
</style>

<div class="scrollbar-container">
  ...
</div>

Dalam kod di atas, kami mula-mula mencipta elemen div yang mengandungi kandungan yang perlu ditatal. Kami menetapkan ketinggian dan lebar elemen div ini kepada 200px dan menetapkan sifat limpahannya kepada auto, supaya bar skrol hanya akan muncul apabila kandungan melimpah.

Kemudian, kami menggunakan ::-webkit-scrollbar pseudo-element dalam CSS untuk mengawal gaya bar skrol. Kami mula-mula menetapkan lebar dan ketinggian bar skrol, dan kemudian menentukan warna latar belakang dan jejari sempadan ibu jari bar skrol. Akhir sekali, kami menetapkan warna latar belakang trek bar skrol.

Dalam contoh ini, kami menggunakan ::-webkit-scrollbar pseudo-elemen enjin penyemak imbas WebKit untuk mengawal gaya bar skrol. Jika tapak web anda perlu menyokong pelayar lain, anda mungkin perlu menggunakan elemen pseudo yang berbeza untuk mengawal gaya bar skrol.

Sebelum menamatkan, anda perlu ambil perhatian bahawa kebanyakan penyemak imbas arus perdana kini menyokong kaedah ini untuk menyembunyikan bar skrol, tetapi ia tidak termasuk beberapa penyemak imbas lama seperti IE dan Edge Jika anda perlu serasi dengan yang lama ini pelayar, versi penyemak imbas, anda boleh menggunakan JavaScript untuk mengawal keterlihatan bar skrol.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan bar skrol menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!