Bagaimana untuk Mengawal Bar Skrol Mendatar dalam Elemen 'div' CSS?

Susan Sarandon
Lepaskan: 2024-11-11 15:38:03
asal
337 orang telah melayarinya

How to Control Horizontal Scrollbars in CSS 'div' Elements?

Mengawal Bar Tatal Mendatar dalam Elemen 'div' CSS

Apabila bekerja dengan bekas 'div' dalam CSS, anda mungkin menghadapi situasi yang anda inginkan bar skrol mendatar sahaja. Artikel ini membincangkan cara untuk mencapai gelagat ini.

Dalam coretan kod yang disediakan, anda telah mengkonfigurasi sifat 'limpahan' kepada 'auto', yang membenarkan penatalan mendatar dan menegak apabila kandungan melebihi lebar atau ketinggian yang ditentukan . Untuk mengehadkan penatalan ke satah mendatar, ubah suai sifat 'overflow-y' seperti berikut:

div#tbl-container {
    overflow: hidden;
    overflow-y: auto;
    scrollbar-base-color: #ffeaff;
}
Salin selepas log masuk

Dengan menetapkan 'overflow-y' kepada 'auto,' anda membenarkan tatal menegak automatik jika ketinggian kandungan melebihi ketinggian 'div', manakala 'overflow' ditetapkan kepada 'tersembunyi' menghalang penatalan mendatar melainkan lebar kandungan melebihi lebar 'div' yang ditentukan.

Dalam Internet Explorer (IE) versi 6-7, tambahan Sambungan CSS3 diperlukan untuk menyekat bar skrol menegak:

div#tbl-container {
    overflow: auto;
    overflow-y: hidden;
    scrollbar-base-color: #ffeaff;
    -ms-overflow-y: hidden;
}
Salin selepas log masuk

Awalan '-ms' ini digunakan untuk menampung IE8 kerana penetapan ciri standard pengesyoran pra-calon Microsoft di bawah ruang namanya sendiri.

Perlu diperhatikan bahawa IE8 mungkin telah menangani pepijat ini, menghapuskan keperluan untuk awalan '-ms'. Namun begitu, pengubahsuaian CSS yang dinyatakan di atas harus memberikan hasil yang diinginkan dalam mengawal bar skrol untuk elemen 'div'.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Bar Skrol Mendatar dalam Elemen 'div' CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan