Skrol dalam Jadual HTML ialah salah satu ciri untuk menatal data daripada format mendatar dan menegak. Secara lalai, bar skrol menegak membolehkan selepas memasukkan bilangan data untuk memaksimumkan saiz dalam mod menegak. Tetapi dalam mod mendatar, selepas memasukkan data dalam format perenggan dan tidak dibalut, halaman mengandungi anak panah kanan sebagai pilihan untuk membolehkan data dalam bar skrol mendatar. Kami telah menyesuaikan pilihan skrol dengan bantuan penunjuk tetikus. Kami juga boleh memperuntukkan sempadan, ketinggian dan lebar jadual tatal.
Apabila kandungan kotak teks terlalu besar untuk dimuatkan, kotak Tatal HTML akan memastikan kotak itu menumbuhkan bar skrol. Sesetengah aplikasi, seperti aplikasi mudah alih, menggunakan kotak skrol, yang akan memaparkan ciri mereka, tetapi skrin mudah alih yang besar akan memaparkannya dengan baik beberapa kesesuaian skrin mudah alih kecil, ia tidak akan dipaparkan pada skrin, iaitu) ciri aplikasi, yang akan digunakan dalam kotak skrol. Sesetengah pemalam diperlukan untuk menunjukkan beberapa ciri dalam aplikasi web yang akan digunakan dalam skrin penyemak imbas. Katakan kita ingin menambah pilihan bar skrol dalam HTML, gunakan pilihan "limpahan", dan tetapkannya sebagai didayakan secara automatik untuk menambah bar skrol mendatar dan menegak. Jika kita ingin menambah pilihan bar menegak dalam Html, tambahkan baris "overflow-y" dalam fail.
Limpahan:skrol:
{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}Menggunakan
<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>Diberikan adalah contoh untuk jadual HTML:
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>Output:
Dalam contoh di atas, kami telah mendayakan tatal dalam bar mendatar dan menegak; skrol akan didayakan secara automatik jika teks melebihi had kotak teks.
Kod:
<html>
<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>
<body>
<center>
<marquee class="divScroll" color:"white">Welcome to my domain</marquee>
</center>
</body>
</html>Output:
Dalam contoh di atas, kami menggunakan
Dalam contoh di bawah, kami akan menggunakan fungsi amaran tentang jumlah data yang akan dipaparkan pada halaman web dalam format piksel.
Kod:
<html> <body> <center> <div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:"white"> <marquee>Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain </marquee> </div> <button onclick="alert( getComputedStyle(example).width )">alert( getComputedStyle(example).width )</button> </center> </body> </html>
Output:
Kita boleh menggunakan baris jadual
Kod:
<html> <body> <center> <div style="overflow-x:auto;"> <table> <tr> <th>Welcome to my domain</th> <th>Name</th> <th>Email</th> </tr> <tr> <td>Sivaraman</td> <td>Sivaraman</td> <td>[email protected]</td> </div> </center> </body> </html>
Output:
Di sini kita akan melihat Pelbagai Jenis Kotak Tatal dalam HTML
Dalam pilihan kotak skrol, kami telah menambah jenis warna yang berbeza dalam kawasan ruang kotak teks, seperti yang ditunjukkan dalam contoh di bawah:
Kod:
<html> <body> <div style="height:125px;width:100px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain</div> </body> </html>
Output:
Dalam contoh di atas, kami telah menentukan warna dalam teks, sama dalam panel skrol.
Kami telah menyesuaikan bar skrol menggunakan sambungan Webkit; ia akan berfungsi dalam penyemak imbas.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-bottom: 200%;
}
.scroll {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<div class="scroll">
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
</div>
</body>
</html>Output:
Dalam kod di atas, kami melihat pilihan tatal pada halaman penuh. Ia adalah pilihan tersuai kami; kami telah mendayakan pilihan tatal dalam skrin latar belakang penuh. Sekali, kami juga menyemak Keserasian penyemak imbas kerana kadangkala alat –Webkit dalam gaya CSS tidak menerima beberapa penyemak imbas. Contohnya, Microsoft mempunyai sambungan –ms- dan vendor penyemak imbas lain seperti sambungan –Webkit-.
Kami juga telah menggunakan kotak Tatal dalam imej latar belakang atau imej latar depan. Mari kita lihat beberapa contoh asas ciri ini.
Kod:
<html> <div style="height:180px;width:180px;overflow:auto;"> <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" alt="Sample picture for scroll box"> </div> </html>
Output:
We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:
Code:
<div style="height:100px;width:140px;overflow:auto;border:8px solid yellow;padding:3%">Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.</div>
Output:
The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.
When we use the Scroll box, it may have some features like.,
In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.
Atas ialah kandungan terperinci Bar skrol dalam Jadual HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
