Gaya CSS tulen: gaya bar skrol yang sangat berguna

Dalam proses menghiris, jika kita ingin menambah bar skrol secara setempat dalam beberapa DIV, ia akan menjadi sangat hodoh.

Apabila kami tidak sabar, kami biasanya menggunakan pemalam Jquery untuk mencapainya. Dan banyak kali kami masih menghadapi masalah keserasian Secara ringkasnya, pengalaman pengguna tidak sebaik menggunakan overflow:scroll terus.

Hari ini saya ingin mengesyorkan gaya bar skrol CSS tulen yang sangat mudah digunakan Anda hanya perlu menambah kod berikut pada fail CSS anda dan anda boleh menggunakan overflow:scroll di lokasi yang berbeza.

Kesan paparan juga sangat bagus.

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

Dan anda juga boleh menentukan warna secara langsung melalui CSS.

Atas ialah kandungan terperinci Gaya CSS tulen: gaya bar skrol yang sangat berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!