Bar scroll CSS dengan meter kemajuan

Bar skrol itu sendiri adalah penunjuk kemajuan semula jadi. Kedudukan bar tatal secara langsung mencerminkan kemajuan menatal elemen tatal (biasanya keseluruhan halaman). Tetapi ia lebih seperti penunjuk kemajuan daripada bar kemajuan "dapat diisi".

Kita boleh menggunakan beberapa teknik CSS untuk membuat bar skrol "mengisi" semasa menatal.

Tetapi ini hanya terpakai kepada sifat gaya bar skrol dengan -webkit- awalan. Dalam erti kata lain, sifat-sifat ini tidak standard. Ciri-ciri gaya scrollbar yang diseragamkan adalah warna scrollbar-width dan scrollbar-color , yang tidak dapat mencapai kesan ini, tetapi mungkin lebih selamat dalam jangka masa panjang. Namun, versi dengan awalan vendor mungkin tidak akan hilang, jadi jika anda fikir ini adalah satu bentuk yang aneh dari peningkatan progresif, yang mungkin OK, sama ada.

Apakah kemahirannya?

Pada asasnya, ia dilakukan dengan menambahkan box-shadow besar ke bahagian atas gelangsar scrollbar (atau sisi elemen menatal mendatar).

 : root {
  --Shadow: #43A047;
  --scrollBarbg: #eee;
  --thumbbg: #66BB6A;
}
::-WebKit-scrollbar {
  lebar: 16px;
}
::-WebKit-scrollbar-track {
  latar belakang: var (-scrollbarbg);
}
::-WebKit-Scrollbar-Thumb {
  latar belakang warna: var (-thumbbg);
  box-shadow: 0 -100VH 0 100VH var (-Shadow), 0 0 15px 5px Black;
}

Demo

Kali pertama saya melihat ini berada di pena di Myk.

Contoh itu tidak membezakan bahagian gelangsar bar skrol sama sekali, yang menjadikannya lebih seperti bar kemajuan, tetapi juga lebih sukar untuk digunakan. Demo saya menggunakan slider warna yang sedikit berbeza.

Bolehkah saya menggunakannya?

tidak boleh! Selain daripada yang sangat pelik dan tidak standard. Pelayar Safari terhempas dan saya tidak tahu bagaimana untuk memperbaikinya.

Saya mempunyai helah CSS yang sangat relevan, walaupun.

Saya ingin mengetahui lebih lanjut mengenai gaya scrollbar

Ok, sila lihat di sini.

Atas ialah kandungan terperinci Bar scroll CSS dengan meter kemajuan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!