Bagaimana untuk menambah bar skrol dalam css

Dalam CSS, anda boleh menggunakan atribut limpahan untuk menetapkan bar skrol Anda hanya perlu menambah gaya "overflow:scroll" pada elemen. Sifat ini mentakrifkan cara kandungan yang melimpahi kawasan kandungan elemen akan dikendalikan. Jika nilai adalah tatal, ejen pengguna menyediakan mekanisme tatal sama ada diperlukan atau tidak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

1. Kita boleh menggunakan atribut limpahan untuk menetapkan sama ada bar skrol muncul

Atribut ini mentakrifkan cara kandungan yang melimpahi kawasan kandungan elemen akan dikendalikan. Jika nilai adalah tatal, ejen pengguna menyediakan mekanisme tatal sama ada diperlukan atau tidak. Oleh itu, ada kemungkinan bar skrol akan muncul walaupun semuanya sesuai di dalam kotak elemen.

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

overflow-y: Tetapkan cara mengurus kandungan apabila kandungan objek melebihi ketinggian yang ditentukan;

overflow-x: Tetapkan cara mengurus kandungan apabila kandungan objek melebihi lebarnya

Parameter:

kelihatan: Kembangkan kawasan untuk memaparkan semua kandungan

auto: Tambah bar skrol hanya apabila kandungan melebihi nilai had

tersembunyi: Sentiasa Sembunyikan bar skrol

Tatal: Sentiasa tunjukkan bar skrol

Apabila kawasan kandungan peringkat blok melebihi skop elemen peringkat blok, ia akan dipaparkan dalam borang daripada bar skrol, dan anda boleh menatal kandungan di dalam , kandungan di dalam tidak akan melebihi skop kawasan peringkat blok.

2 Gunakan atribut bar skrol untuk menetapkan gaya bar skrol

• ::-webkit-scrollbar Bahagian keseluruhan bar skrol

• : :-butang webkit-scrollbar-button di kedua-dua hujung bar skrol

• ::-webkit-scrollbar-track trek luar

• ::- webkit-scrollbar-track-piece Trek dalam, bahagian tengah bar skrol (dialih keluar)

• ::-webkit-scrollbar-thumb satu yang boleh diseret di dalam bar skrol

• ::-webkit-scrollbar-sudut sudut

• ::-webkit-resizer mentakrifkan gaya blok seret di sudut kanan bawah

Contoh:

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -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;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

Pembelajaran yang disyorkan: tutorial video css

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