Bagaimana untuk menambah bar skrol dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah bar skrol dalam jquery

王林

Lepaskan： 2023-05-14 10:33:37

asal

753 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

3. Sediakan pemalam jQuery NiceScroll

Mulakan pemalam jQuery NiceScroll menggunakan kod berikut:

<script>
  $(document).ready(function(){
    $("html").niceScroll();
  });
</script>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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,
  });  
});

Salin selepas log masuk

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!