bar skrol css tersembunyi

Dalam proses membuat halaman web, bar skrol merupakan elemen reka bentuk yang tidak dapat dielakkan. Walau bagaimanapun, kadangkala kemunculan bar skrol memecahkan reka bentuk keseluruhan halaman. Dalam kes ini, kita perlu menggunakan beberapa helah untuk menyembunyikan bar skrol.

CSS menyediakan pelbagai kaedah untuk menyembunyikan bar skrol, kami akan memperkenalkannya satu persatu di bawah.

1 Gunakan atribut limpahan

Dalam CSS, kita boleh menggunakan atribut limpahan untuk mengawal sama ada kandungan elemen harus melimpahi bekasnya. Apabila atribut limpahan ditetapkan kepada tersembunyi, kandungan elemen akan dipotong, yang boleh mencapai kesan menyembunyikan bar skrol. Berikut ialah kod contoh:

body{
  overflow: hidden;
}

Kod di atas akan menyembunyikan bar skrol keseluruhan halaman Jika anda hanya mahu menyembunyikan bar skrol elemen tertentu, anda boleh mencari pemilih CSS bagi elemen tersebut dan tetapkan atribut limpahan di dalamnya.

#container{
  overflow: hidden;
}

2. Gunakan gaya Webkit

Webkit ialah enjin CSS yang menyokong kebanyakan penyemak imbas moden, termasuk Chrome dan Safari. Berikut ialah beberapa cara untuk menyembunyikan bar skrol menggunakan gaya Webkit:

1. Sembunyikan bar skrol menegak:

::-webkit-scrollbar{
  width: 0px;
}

Kod di atas akan menyembunyikan bar skrol menegak kerana ia secara lalai. lebar bar skrol menegak ialah 17px.

2. Sembunyikan bar skrol mendatar:

::-webkit-scrollbar{
  height: 0px;
}

Begitu juga, kod di atas akan menyembunyikan bar skrol mendatar kerana ketinggian bar skrol mendatar juga 17px secara lalai.

3. Sembunyikan semua bar skrol:

::-webkit-scrollbar{
  display: none;
}

Kod di atas akan menyembunyikan semua bar skrol sepenuhnya.

3. Gunakan jQuery

Jika anda menggunakan jQuery, anda juga boleh menggunakannya untuk menyembunyikan bar skrol. Berikut ialah beberapa cara untuk menyembunyikan bar skrol menggunakan jQuery:

1. Sembunyikan bar skrol menegak:

$(document).ready(function(){
  $('body').css('overflow-y', 'hidden');
});

Selepas menggunakan kod di atas, bar skrol menegak dalam halaman akan menjadi bersembunyi.

2. Sembunyikan bar skrol mendatar:

$(document).ready(function(){
  $('body').css('overflow-x', 'hidden');
});

Kod di atas akan menyembunyikan bar skrol mendatar.

4. Gunakan JavaScript

Jika anda ingin menggunakan JavaScript asli untuk menyembunyikan bar skrol, berikut ialah beberapa kaedah yang boleh anda gunakan:

1. Sembunyikan skrol menegak bar:

document.getElementsByTagName("body")[0].style.overflowY = "hidden";

Kod di atas akan menyembunyikan bar skrol menegak.

2. Sembunyikan bar skrol mendatar:

document.getElementsByTagName("body")[0].style.overflowX = "hidden";

Kod di atas akan menyembunyikan bar skrol mendatar.

Ringkasnya, di atas ialah beberapa kaedah biasa untuk menyembunyikan bar skrol. Bergantung pada keperluan anda, anda boleh memilih satu atau lebih kaedah ini. Walau bagaimanapun, perlu diingatkan bahawa menyembunyikan bar skrol akan menjejaskan pengalaman pengguna, jadi pertukaran dan ujian simulasi diperlukan dalam penggunaan sebenar.

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