Bar skrol dalam HTML

Bar mendatar atau menegak yang digunakan untuk menggerakkan kawasan tontonan dalam tetingkap, atas, bawah, kiri atau kanan menggunakan tetikus atau pad sentuh atau papan kekunci. Anda boleh mengklik pada trek untuk mendapatkan bar skrol ke bahagian tertentu tetingkap atau klik pada bar dan seret bar ke lokasi tertentu. Di bawah ialah tangkapan skrin bar skrol untuk membantu anda memahami lebih lanjut.

Imej di atas ialah dokumen perkataan biasa kami dengan bar skrol menegak lalainya. Bar, juga kadangkala dipanggil pemegang, digunakan untuk menyeret kawasan tontonan tetingkap. Dan kawasan di mana bar kami meluncur dipanggil trek.

Selalunya terdapat bar skrol lalai pada tetingkap anda sama ada maklumat yang terkandung dalam tetingkap itu melimpah atau tidak. Tetapi pada masa kini, bar skrol ini dibuat interaktif; iaitu, jika dan apabila maklumat menjadi melimpah, bar skrol menegak atau/dan mendatar muncul.

Dalam artikel ini, kami akan mencuba dan mencipta bar skrol atau, sepatutnya kami katakan, bar skrol interaktif menggunakan HTML mudah.

HTML || Bar Tatal || Lebih Aliran

HTML mempunyai cara untuk mengatasi apa sahaja yang anda fikirkan, dan jika tidak, maka dengan bantuan sifat CSS, HTML memastikan anda mendapat hasil yang anda inginkan. Satu sifat CSS sedemikian dipanggil sifat 'limpahan' yang digunakan pada

tag. Sifat 'limpahan' boleh digunakan dalam pelbagai cara, tetapi kami akan menghuraikan dua daripada cara sedemikian dalam artikel ini.

Apakah Tujuan Harta ‘Limpahan’ dalam Bar Tatal dalam HTML?

Sifat 'limpahan' membantu anda memutuskan bahawa anda harus memberikan maklumat atau data anda atau kandungan melimpah dari kotak elemen anda, seperti beberapa kandungan yang disertakan dalam

tag, apa yang perlu dilakukan. Harta ini membantu anda memutuskan sama ada mahu menunjukkan atau tidak untuk menunjukkan kandungan anda yang melimpah atau menutupnya menggunakan bar skrol untuk kegunaan mudah kandungan yang besar untuk kawasan yang boleh dilihat.

Walau bagaimanapun, sifat 'overflow' digunakan dan berkesan dengan kandungan yang merupakan elemen blok dengan ketinggian tertentu. Sifat 'overflow' disokong oleh hampir semua pelayar web juga. Sintaksnya agak mudah untuk menggunakan sifat ini.

Sintaks:

limpahan: tatal |auto|kelihatan|tersembunyi|awal|warisi;

Daripada pilihan di atas, seseorang boleh menggunakan mana-mana nilai ini untuk sifat limpahan. Salah satu aplikasi sifat limpahan adalah dengan

tag, yang apabila digunakan, mencipta kotak skrol.

Mari belajar tentang Peti Tatal.

HTML || Bar Tatal || Kotak Tatal

Kotak skrol dalam HTML hanyalah kotak yang jika dan semasa digunakan mempunyai bar skrol sendiri. Jadi jika seseorang meletakkan maklumat atau petikannya di dalam kotak skrol, dia tidak perlu risau tentang bar skrol kerana bar skrol itu boleh didapati bersama-sama dengan kotak skrol.

Contoh kotak skrol yang disimpan dalam HTML:

Biasanya, kotak skrol diperoleh dengan penggunaan

tag, dan penyesuaian untuk bar dilakukan menggunakan sifat CSS. Semasa membuat kotak skrol, kami menggunakan sifat CSS yang dikenali sebagai 'overflow' dan menetapkannya kepada 'scroll' untuk memberitahu penyemak imbas bahawa ia adalah untuk menambah bar skrol mendatar dan menegak.

Di bawah ialah contoh kod mudah dan asas untuk kotak tatal HTML dengan overflow:scroll.

<div style="width: 150px; height: 150px; line-height: 3em; overflow:scroll; border: thin #000 solid; padding: 5px;">
<p>Terdapat elemen 'div' menggunakan 'overflow:auto' untuk mencipta bar skrol.</p>
<pre class="brush:php;toolbar:false">

Ini menghasilkan penampilan eksplisit bar skrol. Hasilnya anda boleh perhatikan dalam gambar di bawah.

Seperti yang kita lihat sebelum ini, sifat 'limpahan' mempunyai beberapa nilai yang boleh digunakan. Di atas ialah contoh 'overflow:scroll'. Lain-lain ditunjukkan di bawah:

‘limpahan:auto.’

Ia mencipta kesan yang sama seperti overflow:scroll, tetapi dengan overflow:auto, bar skrol hanya akan muncul JIKA data melimpah; jika tidak, kotak skrol akan muncul tanpa sebarang bar skrol.

Lihat di bawah:

Kedua-dua imej di atas menggunakan sifat limpahan dengan 'auto' sebagai nilainya. Perhatikan bahawa imej pertama mempunyai bar skrol, manakala imej kedua tidak mempunyai satu. Ini ialah fungsi asas sifat 'overflow:auto'; iaitu bar skrol hanya akan muncul JIKA terdapat beberapa data yang melimpah.

‘overflow:hidden’

This property has a special purpose. Even if some data is in an overflowing state, overflow property with value ‘hidden’ will contain it inside the window and do not let the user know. Observe below.

Observe that, though there is no scroll bar and the data is overflowed, yet it is perfectly contained inside the visible area. ‘Overflow:visible’ has the opposite effect. It shows the overflowed content, and the content displays over the visible window.

Apart from applying the ‘overflow’ property to a

tag, another attribute can be used, the

Below are three images with different values assigned to attribute ‘scrolling’.

Thus we saw two different methods to add scroll bars, explicit or default.

> One was with the use of the ‘overflow’ property that is usually applied to

tags.

> And the second was the ‘scrolling’ attribute that is applied to

Both serve the same purpose of adding a scroll bar to your visible content.