Bagaimana untuk menetapkan bar skrol css

Apabila halaman web terus berkembang, pilihan pengguna berubah secara beransur-ansur. Justru kerana perubahan inilah banyak tapak web mengemas kini gaya reka bentuk mereka secara beransur-ansur, dan salah satu elemen yang sangat diperlukan ialah bar skrol. Perlu dikatakan bahawa bar skrol telah menjadi elemen reka bentuk penting untuk banyak laman web. Dalam CSS, gaya bar skrol boleh dicapai melalui satu siri pemilih CSS. Mari analisa secara terperinci cara menetapkan bar skrol CSS.

Apakah bar skrol?

Sebelum memperkenalkan cara menyediakan bar skrol, kita perlu memahami apa itu bar skrol.

Bar skrol ialah komponen interaktif yang sering kami gunakan ia sering muncul di bar sisi, bingkai atau kawasan yang mengandungi halaman web. Gunakan bar skrol untuk menatal kandungan dengan mudah dalam kawasan yang lebih kecil untuk melihat keseluruhan kandungan. Secara umumnya, bar skrol terbahagi kepada dua jenis: bar skrol mendatar dan bar skrol menegak, di mana bar skrol menegak adalah yang paling biasa digunakan.

Dalam CSS, kami boleh menyesuaikan gaya bar skrol kami sendiri dengan mudah. Seterusnya, kami akan memperkenalkan cara menyediakan bar skrol CSS satu demi satu.

Cara untuk menetapkan bar skrol CSS tulen

Menetapkan bar skrol CSS memerlukan penggunaan pemilih ::-webkit-scrollbar dan ::-webkit-scrollbar-thumb. Di bawah, kami akan menganalisis penggunaannya masing-masing.

::-webkit-scrollbarPemilih

::-webkit-scrollbarPemilih membolehkan anda menetapkan gaya untuk bekas bar skrol, termasuk warna latar belakang bar skrol, ketinggian, lebar, dsb. Contohnya, menggunakan pemilih ::-webkit-scrollbar, kita boleh menetapkan keseluruhan bar skrol kepada kelabu:

::-webkit-scrollbar {
  background-color: #eee;
  width: 8px;
}

Kod di atas mentakrifkan bekas bar skrol dengan lebar 8 piksel dan menetapkan latar belakangnya Ia kelabu muda.

Kami juga boleh menggunakan kelas pseudo CSS untuk menyesuaikan status bar skrol, seperti: bar skrol melayang, bar skrol diklik, dsb. Contohnya, kod berikut menukar warna bar skrol kepada merah apabila tetikus melayang di atasnya:

::-webkit-scrollbar:hover {
  background-color: #f00;
}

::-webkit-scrollbar-thumbPemilih

dalam ::-webkit-scrollbarDalam pemilih, kita ada menentukan gaya bar skrol, tetapi penampilan bar skrol masih menjadi gaya lalai, yang agak membosankan. Pada masa ini, kita perlu menggunakan pemilih ::-webkit-scrollbar-thumb untuk menetapkan gaya ibu jari bar skrol.

Berikut ialah contoh menggayakan ibu jari:

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

Kod ini mentakrifkan latar belakang kelabu dan sudut bulat 4 piksel untuk ibu jari bar skrol.

Selain menetapkan warna dan sudut bulat, kami juga boleh mencantikkan lagi penampilan bar skrol dengan menetapkan bayang-bayang, sempadan, dll.:

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);
  border: 1px solid #d8d8d8;
}

Kod di atas mentakrifkan bar tatal dengan sempadan dan ibu jari Bar Tatal dengan kesan bayangan.

Cara untuk menetapkan bar skrol CSS yang serasi dengan keseluruhan rangkaian

Walaupun kami telah memperkenalkan cara untuk menetapkan bar skrol CSS tulen di atas, kaedah ini hanya boleh berkuat kuasa pada berasaskan Webkit penyemak imbas (contohnya: Chrome, Safari, dll.). Untuk pelayar lain (seperti Firefox, Edge, dll.), JavaScript diperlukan untuk mencapai kesan yang serupa.

Nasib baik, beberapa perpustakaan CSS pihak ketiga telah memberikan kami penyelesaian dalam hal ini. Sebagai contoh, kita boleh menggunakan perpustakaan CSS mCustomScrollbar untuk melaksanakan bar skrol tersuai silang penyemak imbas dengan mudah.

Mula-mula, perkenalkan fail CSS mCustomScrollbar:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

Kemudian, di mana anda perlu menggunakan bar skrol tersuai, perkenalkan dua fail berikut:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Teruskan Seterusnya, dalam kod JavaScript, gunakan kod berikut untuk memulakan mCustomScrollbar:

$(document).ready(function () {
  $(".content").mCustomScrollbar();
});

Kod di atas akan menggunakan mCustomScrollbar pada elemen dengan kelas content dan boleh berkuat kuasa dalam pelbagai penyemak imbas.

Pada masa yang sama, mCustomScrollbar turut menyokong beberapa pilihan penyesuaian lanjutan, seperti: lebar bar skrol, warna bar skrol, gelagat bar skrol, dsb. Pilihan ini boleh ditetapkan dalam fungsi permulaan:

$(".content").mCustomScrollbar({
  theme: "dark",
  scrollbarPosition: "inside",
  axis: "y",
  scrollInertia: 500
});

Kod di atas mentakrifkan tema hitam, bar skrol menegak dalaman dan kesan bar skrol 500 milisaat.

Ringkasan

Dalam artikel ini, kami telah menerangkan secara terperinci penggunaan CSS untuk menyesuaikan bar skrol. Kami melaksanakan bar skrol tersuai dalam penyemak imbas yang berbeza dengan memperkenalkan pemilih ::-webkit-scrollbar dan ::-webkit-scrollbar-thumb dan pustaka mCustomScrollbar. Oleh itu, apabila mereka bentuk halaman web, anda mungkin ingin menyesuaikan kesan bar skrol yang lebih baik daripada bar skrol lalai mengikut keperluan reka bentuk anda.

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