Menggulir memungkinkan pengguna untuk melihat halaman web/dokumen panjang ke kiri dan ke kanan atau ke atas dan ke bawah. Itu dapat dilakukan dengan menambahkan bilah gulir horizontal dan vertikal tergantung pada kontennya. Dimensi bilah gulir seperti tinggi dan lebar diatur secara default. Namun, ini dapat disesuaikan dengan bantuan metode JavaScript yang terkait. Setelah mereka dapat ditambahkan atau diatur ke dalam dokumen, pengguna dapat dengan mudah mengidentifikasi mereka menggunakan ' scrollTop() ”, dan “ scrollLeft() metode.
Posting ini menjelaskan tujuan, dan fungsionalitas metode 'scrollLeft ()' di jQuery.
Apa itu Metode 'scrollLeft ()' di jQuery?
“ scrollLeft() ” Metode ini dirancang khusus untuk bilah gulir horizontal untuk mengatur dan mengambil posisinya dalam piksel. Ini menghitung posisi scroll bar elemen HTML yang dipilih. Ini sebagian besar diterapkan pada elemen div, container, dan section.
Sintaks (Atur Posisi Scrollbar Horizontal)
$ ( pemilih ) .scrollLeft ( posisi )
Sintaks di atas mengambil nilai integer sebagai “ posisi ” untuk menyetel posisi bilah gulir horizontal pemilih yang ditargetkan.
Sintaks (Dapatkan Posisi Bilah Gulir Horizontal)
$ ( pemilih ) .scrollLeft ( )
Sintaks ini mengembalikan nilai argumen 'posisi' pemilih dalam piksel.
Mari gunakan metode yang ditentukan secara praktis.
Kode HTML
Pertama, lihat kode HTML yang disebutkan:
< bagian gaya = 'tinggi:150px; lebar: 200px ;margin:otomatis;batas:2px hitam pekat; luapan: otomatis;ruang putih: nowrap;' >
< h2 > Selamat datang di Linuxint ! h2 >
bagian >
< tombol > Tetapkan Posisi tombol >
Pada baris kode di atas:
- “
” tag berisi bagian di dalam dokumen HTML yang disesuaikan dengan bantuan atribut “gaya”. - Di dalam bagian yang dibuat, ' ” tag mendefinisikan subjudul.
- Terakhir, “
” tag menambahkan tombol.
Catatan: Ikuti kode HTML yang diberikan di semua contoh postingan ini.
Contoh 1: Menerapkan Metode “scrollLeft()” untuk Mengatur Posisi Scrollbar (Horizontal)
Contoh ini menggunakan metode “scrollLeft()” untuk menyetel bilah gulir (horizontal) pada posisi yang ditentukan.
Kode jQuery
Ikuti kode jQuery yang diberikan:
< naskah src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > naskah >< naskah >
$ ( dokumen ) .siap ( fungsi ( ) {
$ ( 'tombol' ) .klik ( fungsi ( ) {
$ ( 'bagian' ) .scrollLeft ( lima puluh ) ;
} ) ;
} ) ;
naskah >
Dalam cuplikan kode ini:
- Pertama, tentukan jalur CDN dari pustaka jQuery di “
” tag dari situs resminya “ https://jquery.com/ ” dengan bantuan “ src ” atribut. - Selanjutnya, tag “