Bagaimana untuk mengubah suai bar skrol dalam css

Bar skrol ialah elemen yang digunakan secara meluas dalam reka bentuk dan pembangunan web. Ia membolehkan pengguna menatal halaman dan melihat lebih banyak kandungan. Walau bagaimanapun, gaya bar skrol lalai penyemak imbas mungkin tidak sepadan dengan reka bentuk web, mengakibatkan ketidakselarasan visual. Untuk melakukan ini, kami boleh menggunakan CSS untuk mengubah suai gaya bar skrol untuk disepadukan dengan lebih baik ke dalam reka bentuk web. Artikel ini akan memperkenalkan cara mengubah suai bar skrol melalui CSS.

1. Fahami pelbagai bahagian bar skrol

Sebelum mengubah suai bar skrol, kita perlu memahami pelbagai bahagian bar skrol. Dalam kebanyakan penyemak imbas, bar skrol terdiri daripada empat bahagian: peluncur, trek, anak panah ke bawah dan anak panah ke atas. Antaranya, slider merujuk kepada bahagian yang boleh diseret, trek adalah kawasan di mana slider bergerak, dan anak panah ke bawah dan anak panah atas adalah butang untuk menatal ke bawah dan ke atas masing-masing.

2. Ubah suai warna peluncur

Mula-mula, mari kita ubah suai warna peluncur. Melalui pemilih unsur pseudo CSS, kita boleh memilih bahagian peluncur dan mengubah suai warnanya. Kod khusus adalah seperti berikut:

/* 选中滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #666;
}

Kod di atas menukar warna latar belakang peluncur kepada kelabu gelap (#666), dan juga boleh diubah suai kepada warna lain mengikut keperluan.

Perhatikan bahawa nama gaya CSS bar skrol berbeza sedikit dalam penyemak imbas yang berbeza. Dalam penyemak imbas dengan teras Webkit, seperti Chrome, Safari, dsb., pemilih ialah "::-webkit-scrollbar-thumb" dalam Firefox, pemilih ialah "::-moz-scrollbar-thumb"; Dalam penyemak imbas, pemilih ialah "::-ms-scrollbar-thumb".

3. Ubah suai warna trek dan latar belakang

Seterusnya, mari ubah suai warna dan latar belakang. Gunakan pemilih unsur pseudo untuk memilih bahagian trek dan ubah suai gayanya dalam cara seperti peluncur. Kod khusus adalah seperti berikut:

/* 选中轨道部分 */
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

Kod di atas menukar warna latar belakang trek kepada putih pudar (#eee) dan menetapkan jejari sudut sempadan kepada 10 piksel. Sekali lagi, ini boleh diubah suai kepada warna lain dan jejari sudut mengikut keperluan.

4. Ubah suai gaya anak panah

Akhir sekali, mari kita ubah suai gaya anak panah. Tidak seperti peluncur dan trek, anak panah tidak mempunyai pemilih bebas Kita perlu menggunakan pemilih gabungan untuk mengubah suai gaya anak panah. Kod khusus adalah seperti berikut:

/* 选中滚动条按钮 */
::-webkit-scrollbar-button {
  background-color: #666;
  display: block;
}

/* 选中向上箭头 */
::-webkit-scrollbar-button:start {
  height: 20px;
  background-image: url('up-arrow.svg');
  background-size: contain;
}

/* 选中向下箭头 */
::-webkit-scrollbar-button:end {
  height: 20px;
  background-image: url('down-arrow.svg');
  background-size: contain;
}

Dalam kod di atas, kami mula-mula memilih keseluruhan butang bar skrol melalui pemilih "::-webkit-scrollbar-button" dan menetapkan warna latar belakangnya kepada kelabu gelap (# 666) dan paparkannya sebagai elemen peringkat blok (paparan: blok;). Seterusnya, kami menggunakan pemilih kombo "::-webkit-scrollbar-button:start" dan "::-webkit-scrollbar-button:end" untuk memilih anak panah atas dan anak panah ke bawah masing-masing, menetapkan ketinggiannya kepada 20 piksel ( ketinggian :20px;) dan tambahkan gaya tersuai pada anak panah menggunakan atribut imej latar belakang dan saiz latar belakang. Perlu diingatkan bahawa imej anak panah perlu disediakan terlebih dahulu dan dipautkan ke fail CSS menggunakan laluan relatif yang betul.

5. Ringkasan

Setakat ini, kami telah mempelajari cara mengubah suai gaya bar skrol dengan menggunakan CSS. Dengan menukar atribut gaya seperti warna, latar belakang dan saiz peluncur, trek dan anak panah, anda boleh menjadikan bar skrol disepadukan dengan lebih baik ke dalam reka bentuk web, dengan itu meningkatkan pengalaman pengguna. Perlu diingatkan bahawa nama gaya CSS bar skrol mungkin berbeza dalam pelayar yang berbeza dan perlu dilaraskan mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai bar skrol dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!