html tetapkan bar skrol

Bar skrol tetapan HTML

Dalam halaman web, jika terdapat terlalu banyak kandungan teks, halaman tersebut mungkin tidak jelas atau reka letak mungkin mengelirukan. Pada masa ini, kami perlu menggunakan bar skrol untuk membantu pengguna melihat semua kandungan pada halaman. Dalam HTML, kita boleh melaksanakan fungsi bar skrol dengan menetapkan atribut.

Antaranya, dua atribut yang paling biasa digunakan ialah limpahan dan limpahan-x / limpahan-y.

1. atribut limpahan

Atribut ini menentukan sama ada untuk memaparkan bar skrol apabila kandungan melebihi bekas. Ia mempunyai tiga nilai ​​​​yang boleh digunakan:

• kelihatan: Nilai lalai, yang bermaksud bar skrol tidak akan dipaparkan, tetapi kandungan akan melimpahi sebahagian bekas.
• tersembunyi: Menunjukkan bahawa kandungan yang melimpah tidak akan dipaparkan dan bar skrol tidak akan dipaparkan.
• auto: Menunjukkan bahawa bar skrol hanya akan dipaparkan apabila kandungan melimpah ke dalam bekas, jika tidak, ia tidak akan dipaparkan.

Contohnya:

<div style="width: 200px; height: 100px; overflow: auto;">
  这里是一段很长的内容...
</div>

Dalam kod ini, lebar elemen div ialah 200px dan ketinggian ialah 100px. Apabila kandungan melebihi julat ini, bar skrol akan dipaparkan secara automatik.

2. atribut overflow-x dan overflow-y

Selain menetapkan bar skrol keseluruhan, kami juga boleh menetapkan bar skrol mendatar dan menegak masing-masing untuk limpahan-x dan limpahan-y.

Seperti yang ditunjukkan dalam kod sampel berikut:

<div style="width: 150px; height: 150px; overflow-x: scroll; overflow-y: hidden;">
 这里是一些很宽的内容...
</div>

Dalam kod ini, dua atribut digunakan. Apabila kandungan terlalu lebar, hanya bar skrol mendatar muncul; Ini memastikan bahawa halaman mempunyai lebih banyak ruang untuk memaparkan kandungan lain.

Selain itu, terdapat atribut yang biasa digunakan - gaya limpahan. Ia boleh digunakan untuk menetapkan gaya bar skrol, seperti borderWidth, warna, gaya, dsb. Sebagai contoh, gunakan kod berikut untuk menukar warna bar skrol kepada biru dan tetapkan lebar kepada 10 piksel:

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
  background-color: #2196F3;
}

Ringkasnya, menyediakan bar skrol menggunakan HTML adalah sangat mudah. Dengan menetapkan sifat limpahan dan limpahan-x / limpahan-y, kami boleh melaksanakan reka letak dan paparan kandungan halaman web dengan mudah. Akhir sekali, anda boleh menjadikan bar skrol lebih konsisten dengan gaya penjenamaan dan pengekodan anda dengan menggunakan gaya limpahan.

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