Tambah bar skrol ke div dalam jquery

Dalam pembangunan web, bar skrol sering digunakan apabila halaman mempunyai terlalu banyak kandungan Untuk memudahkan pengguna menyemak imbas dan melihat kandungan halaman, kami perlu menambah bar skrol. Dalam jQuery, kita boleh mencapai fungsi ini dengan menambahkan bar skrol pada div.

1. Tambah gaya CSS

Pertama, kita perlu mencipta helaian gaya CSS untuk menetapkan saiz, kedudukan dan gaya div. Berikut ialah contoh lembaran gaya:

<style>
    .scrollable {
        width: 500px;
        height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>

Kelas yang dipanggil "boleh ditatal" ditakrifkan di sini untuk menggayakan div. Lebar ialah 500px, tinggi ialah 200px, sempadan ialah 1px sempadan pepejal, padding ialah 10px, terdapat bar skrol dalam arah paksi-y, tetapi tidak dalam paksi-x.

2. Cipta struktur HTML

Dalam HTML, kita perlu mencipta elemen div, dan kemudian menambah kandungan yang perlu ditatal dalam div ini. Untuk kaedah khusus tentang cara mencipta struktur HTML, anda boleh merujuk kepada contoh kod berikut:

<div class="scrollable">
    <p>这是第一条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第二条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第三条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第四条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第五条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第六条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第七条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第八条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第九条内容，可能长度较长，需要滚动条才能浏览。</p>
    <p>这是第十条内容，可能长度较长，需要滚动条才能浏览。</p>
</div>

3. Gunakan jQuery untuk melaksanakan bar skrol

Sekarang kita telah menentukan div gaya dan struktur HTML, teruskan Langkah seterusnya ialah menggunakan jQuery untuk melaksanakan bar skrol.

1. Memperkenalkan jQuery

Pertama, anda perlu memperkenalkan perpustakaan jQuery ke dalam HTML.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Tulis kod

Kemudian, kita perlu menulis kod untuk melaksanakan bar skrol. Pelaksanaan khusus adalah seperti berikut:

<script>
    $(document).ready(function(){
        $('.scrollable').css('overflow-y', 'auto');
    });
</script>

Kod ini menggunakan acara sedia dokumen untuk memastikan kod JS dilaksanakan selepas elemen halaman dimuatkan. Kemudian, gunakan pemilih jQuery untuk memilih elemen div dengan nama kelas boleh tatal dan tetapkan atribut limpahan-y kepada auto. Ini mencapai kesan bar skrol yang muncul secara automatik dalam arah paksi-y.

Di atas ialah cara menggunakan jQuery untuk menambah bar skrol pada div. Jika anda ingin menambah bar skrol pada elemen lain, anda juga boleh mengikuti kaedah ini. Selain menggunakan helaian gaya CSS untuk menetapkan gaya, anda juga boleh menggunakan fungsi jQuery dan kaedah lain untuk mengawal gaya Berikut ialah kaedah mudah untuk rujukan anda.

Atas ialah kandungan terperinci Tambah bar skrol ke div dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!