Alih keluar css bar skrol

Petua CSS: Cara Mengalih Keluar Bar Tatal

Apabila kami membangunkan halaman web, kadangkala kami perlu mengalih keluar bar skrol untuk mencapai kesan visual yang lebih lancar. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mengalih keluar bar skrol.

Kaedah pertama: gunakan atribut limpahan

Biasanya kita boleh mengawal keadaan bar skrol elemen melalui atribut limpahan dalam CSS. Nilai tersembunyi bermakna bar skrol dialih keluar, dan nilai auto bermakna bar skrol dipaparkan. Oleh itu, kita boleh menetapkan atribut limpahan elemen di mana kita ingin mengalih keluar bar skrol kepada tersembunyi.

Sebagai contoh, berikut ialah elemen div dengan bar skrol:

<div style="width: 200px; height: 200px; overflow: auto;">
  <p>这里是一些内容，可以试着往下滚动</p>
</div>

Sekarang kita perlu mengalih keluar bar skrol elemen div ini, cuma tetapkan atribut limpahan elemen kepada tersembunyi :

<div style="width: 200px; height: 200px; overflow: hidden;">
  <p>这里是一些内容，不再有滚动条</p>
</div>

Kaedah kedua: Gunakan helaian gaya

Selain menetapkan gaya terus dalam elemen, kita juga boleh menetapkan gaya elemen dalam helaian gaya, yang boleh membuat kod lebih bersih. Begitu juga, kita boleh mengalih keluar bar skrol dengan menetapkan atribut limpahan:tersembunyi.

Berikut ialah contoh kod menggunakan helaian gaya:

<style>
  .no-scroll {
    overflow: hidden;
  }
</style>

<div class="no-scroll" style="width: 200px; height: 200px;">
  <p>这里是一些内容，没有滚动条</p>
</div>

Kaedah ini lebih fleksibel daripada menetapkan gaya secara langsung dalam elemen Kita boleh berkongsi nama kelas dalam berbilang elemen daripada bar skrol.

Kaedah ketiga: Gunakan ::-webkit-scrollbar pseudo-element

Selain daripada dua kaedah di atas, kita juga boleh menggunakan ::-webkit-scrollbar pseudo-element untuk mengawal gaya bar skrol , dan sembunyikannya.

Berikut ialah contoh kod menggunakan elemen pseudo:

<style>
  .no-scroll::-webkit-scrollbar {
    display: none;
  }
</style>

<div class="no-scroll" style="width: 200px; height: 200px; overflow: auto;">
  <p>这里是一些内容，滚动条已隐藏</p>
</div>

Perlu diingat bahawa kaedah ini hanya menyokong penyemak imbas dengan teras Webkit, seperti Chrome, Safari, dsb., dan tidak berkenaan. kepada pelayar IE, Firefox, dsb.

Ringkasan

Dalam projek sebenar, kadangkala kita perlu mengalih keluar bar skrol untuk mencapai kesan halaman yang lebih lancar. Artikel ini memperkenalkan tiga kaedah berbeza untuk membantu kami menyingkirkan bar skrol.

• Gunakan atribut limpahan: Tetapkan atribut limpahan elemen kepada tersembunyi.
• Gunakan helaian gaya: Tetapkan nama kelas dalam helaian gaya untuk mengawal gaya elemen.
• Gunakan ::-webkit-scrollbar pseudo-element: hanya terpakai pada penyemak imbas dengan teras Webkit, tetapi anda boleh menyesuaikan gaya bar skrol.

Ketiga-tiga kaedah di atas semuanya boleh mencapai kesan mengalih keluar bar skrol Kaedah khusus untuk digunakan bergantung pada keperluan sebenar dan keperluan keserasian penyemak imbas.

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