css set skrol

CSS ialah bahagian penting dalam pembangunan web. Ia mengawal tetapan gaya halaman, dan kesan tatal juga merupakan bahagian penting dalam kemahiran CSS. Dalam artikel ini, kita akan bercakap tentang cara menetapkan tatal dalam CSS untuk menjadikan paparan halaman web lebih kaya dan dinamik.

1. Apa yang menatal

Kesan menatal bermaksud bahawa dalam kawasan tertentu halaman, apabila kandungan melebihi julat kawasan yang boleh dilihat, halaman akan menjana menegak atau secara automatik bar skrol mendatar untuk melihat kandungan di luar julat yang boleh dilihat.

Biasanya, bar skrol menegak muncul di sebelah kanan halaman, dan bar skrol mendatar muncul di bahagian bawah halaman. Selain itu, bar skrol tidak selalu muncul dan tidak muncul apabila kandungan tidak melebihi kawasan yang boleh dilihat.

2. Cara menetapkan penatalan

CSS menyediakan sifat tetapan berkaitan bar skrol Kami boleh menetapkan gaya dan operasi bar skrol. Berikut ialah beberapa sifat tetapan bar skrol yang lebih biasa dalam CSS.

1. limpahan

Atribut limpahan mengawal gelagat kandungan elemen apabila ia melebihi julat yang boleh dilihat bagi elemen induk. Nilai atributnya ialah:

(1) boleh dilihat: Bahagian "limpahan" akan dipaparkan di luar kotak elemen.

(2) tersembunyi: Sembunyikan kandungan "limpahan".

(3) tatal: Kandungan "Limpahan" memaparkan bar tatal.

(4) auto: Tentukan secara automatik sama ada bar skrol perlu dipaparkan.

Kod sampel:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dalam kod di atas, ketinggian elemen DIV ditetapkan kepada 100px dan lebar ditetapkan kepada 200px, dan kemudian ketinggian elemen P ditetapkan kepada 200px dan lebar ditetapkan kepada 400px. Pada masa ini, kerana saiz elemen P melebihi julat yang boleh dilihat bagi elemen DIV, bar skrol akan muncul di bahagian limpahan.

2. lebar bar tatal

Atribut ini boleh mengawal lebar bar tatal Nilainya boleh ditetapkan kepada nipis: nipis, automatik: automatik (akan berdasarkan Perubahan pelayar mengikut tetapan) atau tiada: tiada bar skrol dipaparkan.

Kod contoh:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dalam kod di atas, lebar bar skrol ditetapkan kepada nipis Pada masa ini, bar skrol memaparkan gaya nipis.

3. warna bar skrol

Atribut ini digunakan untuk mengawal warna peluncur bar skrol dan rel slaid Nilai yang tersedia ialah nilai warna automatik atau tersuai. Nilai warna tersuai ditulis sebagai dua nilai warna, dipisahkan oleh ruang untuk mewakili warna sehala dan dipisahkan dengan koma untuk mewakili warna dua hala.

Kod sampel:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dalam kod di atas, tetapkan warna peluncur bar skrol kepada biru dan warna rel slaid kepada lutsinar.

Ringkasan

Artikel ini mengajar beberapa kaedah menetapkan bar skrol dalam CSS Selain atribut yang biasa digunakan ini, terdapat banyak kaedah tetapan lain, dan ia juga mempunyai ciri dan senario Aplikasi mereka sendiri. . Saya harap ia dapat membantu pembaca memahami pengetahuan yang berkaitan dan kaedah praktikal untuk kesan menatal, meningkatkan kemahiran CSS mereka dan menemui serta mempraktikkan kemungkinan baharu.

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