Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah bar skrol dalam jquery
Bagaimana untuk menambah bar skrol dalam jquery
- 王林asal
- 2023-05-14 10:33:37694semak imbas
Apabila halaman web terus berkembang, kandungan yang perlu dipaparkan menjadi semakin kompleks Kadangkala kandungan yang perlu kami paparkan lebih besar daripada tetingkap penyemak imbas. Pada masa ini, kita perlu menggunakan bar skrol. Bar skrol membolehkan kami menyemak imbas sejumlah besar kandungan dalam tetingkap terhad tanpa perlu risau tentang limpahan kandungan. jQuery ialah perpustakaan JavaScript yang berkuasa yang boleh melaksanakan fungsi bar skrol dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah bar skrol pada halaman web.
Apakah pemalam bar skrol jQuery?
pemalam bar skrol jQuery ialah pemalam JavaScript untuk menambah bar skrol pada halaman web. Ia membolehkan pengguna menyemak imbas halaman dengan lebih mudah apabila terdapat lebih banyak kandungan, dan boleh disesuaikan untuk disesuaikan dengan reka bentuk web yang berbeza. Terdapat banyak jenis pemalam bar skrol jQuery, antaranya yang lebih biasa digunakan ialah jQuery NiceScroll, mCustomScrollbar dan PerfectScrollbar.
Gunakan jQuery NiceScroll untuk melaksanakan bar skrol
Dalam artikel ini, kami akan menggunakan pemalam jQuery NiceScroll untuk melaksanakan bar skrol. Ia adalah pemalam bar skrol yang berkuasa yang boleh disesuaikan dengan mudah untuk disesuaikan dengan reka bentuk web yang berbeza. Berikut ialah beberapa langkah tentang cara menambah bar skrol ke halaman web menggunakan pemalam jQuery NiceScroll.
1. Perkenalkan pemalam jQuery dan jQuery NiceScroll
Pertama, anda perlu memperkenalkan pemalam jQuery dan jQuery NiceScroll. Dalam fail HTML anda, tambahkan kod berikut:
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> </head>
2. Tentukan kandungan halaman anda
Dalam fail HTML anda, tentukan kandungan halaman anda. Dalam contoh di bawah, kami menyediakan bar navigasi atas tetap menggunakan CSS.
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Some text here...</p>
</div>
</body>3. Sediakan pemalam jQuery NiceScroll
Mulakan pemalam jQuery NiceScroll menggunakan kod berikut:
<script>
$(document).ready(function(){
$("html").niceScroll();
});
</script>Dalam kod ini, kami menggunakan pemilih jQuery untuk memilih keseluruhan Dokumen HTML, Dan panggil kaedah niceScroll() apabila dokumen sudah sedia.
4. Gaya tersuai
Anda boleh menggunakan CSS untuk menyesuaikan bar skrol anda. Berikut ialah beberapa gaya CSS yang biasa digunakan yang boleh digunakan untuk menetapkan warna, lebar, ketinggian dan sifat lain bar skrol:
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555555;
}5 Permulaan pilihan lain
Selain asas permulaan, anda juga boleh Tetapkan pilihan lain seperti kelajuan tatal, lebar bar tatal, sempadan bar tatal, dsb. Berikut ialah beberapa pilihan yang biasa digunakan:
$(document).ready(function(){
$("html").niceScroll({
cursorwidth: "10px",
cursorborder: "none",
cursorcolor: "black",
background: "#f5f5f5",
autohidemode: false,
horizrailenabled: false,
cursorfixedheight: 80,
});
});Ringkasan
Dalam artikel ini, kami memperkenalkan cara menambah bar skrol pada halaman web menggunakan pemalam jQuery NiceScroll. Menggunakan jQuery NiceScroll memudahkan anda untuk menyesuaikan gaya bar skrol agar sesuai dengan reka bentuk web yang berbeza. Ingat, bar skrol hanyalah satu cara untuk menyediakan akses kepada sejumlah besar kandungan. Anda boleh menggunakan bar skrol untuk memaparkan kandungan di mana-mana yang boleh, menjadikannya lebih mudah bagi pelawat untuk menavigasi tapak anda, selagi kandungan itu bermakna dan mudah dibaca.
Atas ialah kandungan terperinci Bagaimana untuk menambah bar skrol dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!