Bagaimana untuk Menunjukkan Bar Skrol Mendatar sahaja dalam Elemen Div CSS?

Barbara Streisand
Lepaskan: 2024-11-18 10:40:03
asal
319 orang telah melayarinya

How to Show Only Horizontal Scroll Bars in a CSS Div Element?

Cara Menunjukkan Bar Skrol Mendatar Hanya dalam Elemen Div CSS

Bekas Div biasanya digunakan untuk elemen paparan dalam HTML. Untuk memaparkan kedua-dua bar skrol mendatar dan menegak secara automatik apabila kandungan melebihi lebar dan ketinggian yang ditentukan div, sifat limpahan boleh ditetapkan kepada automatik.

Masalah:

Apabila bekas div mempunyai gaya yang ditakrifkan dengan limpahan: auto, kedua-dua bar skrol mendatar dan menegak muncul secara automatik, walaupun kandungan hanya melimpah secara mendatar. Matlamatnya adalah untuk menunjukkan bar skrol mendatar sahaja sambil mengawal ketinggian jadual secara pengaturcaraan.

Penyelesaian:

Kunci untuk menyelesaikan isu ini terletak pada penggunaan CSS3 yang dicadangkan sambungan, yang membenarkan kawalan bebas ke atas bar skrol. Begini cara ia boleh dicapai:

overflow: auto;
overflow-y: hidden;
Salin selepas log masuk

Kod CSS ini menyembunyikan bar skrol menegak sambil membenarkan bar skrol mendatar muncul secara automatik.

Keserasian IE:

IE6-7, bersama-sama dengan pelayar lain, menyokong sambungan CSS3 untuk kawalan bar skrol. Walau bagaimanapun, IE8 memperkenalkan keperluan tambahan:

-ms-overflow-y: hidden;
Salin selepas log masuk

Barisan ini memastikan keserasian ke belakang dalam Mod Standard IE8, menangani kemungkinan perubahan pelaksanaan Microsoft.

Nota Tambahan:

  • Perlu diperhatikan bahawa kehadiran bar skrol mendatar dan menegak dalam IE berkemungkinan disebabkan oleh pepijat. Ujian dalam penyemak imbas lain harus mengesahkan isu ini.
  • IE8 mungkin memperkenalkan pembetulan pepijat, menjadikan kod CSS tambahan untuk IE8 tidak diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan Bar Skrol Mendatar sahaja 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