Menatal membolehkan pengguna melihat halaman web/dokumen panjang kiri dan kanan atau atas dan bawah. Ia boleh dilakukan dengan penambahan bar skrol mendatar dan menegak bergantung pada kandungan. Dimensi bar skrol seperti ketinggian dan lebar ditetapkan secara lalai. Walau bagaimanapun, ini boleh disesuaikan dengan bantuan kaedah JavaScript yang berkaitan. Sebaik sahaja mereka boleh ditambah atau ditetapkan ke dalam dokumen, pengguna boleh mengenal pasti mereka dengan mudah menggunakan terbina dalam ' scrollTop() ', dan juga ' scrollLeft() ” kaedah.
Siaran ini menerangkan tujuan, dan kefungsian kaedah 'scrollLeft()' dalam jQuery.
Apakah Kaedah 'scrollLeft()' dalam jQuery?
' scrollLeft() ” kaedah direka khusus untuk bar skrol mendatar untuk menetapkan dan mendapatkan semula kedudukannya dalam piksel. Ia mengira kedudukan bar skrol elemen HTML yang dipilih. Ia kebanyakannya digunakan pada elemen div, bekas dan bahagian.
Sintaks (Tetapkan Kedudukan Bar Skrol Mendatar)
$ ( pemilih ) .scroll Kiri ( kedudukan )
Sintaks di atas mengambil nilai integer sebagai ' kedudukan ” argumen untuk menetapkan kedudukan bar skrol mendatar pemilih yang disasarkan.
Sintaks (Dapatkan Kedudukan Bar Skrol Mendatar)
$ ( pemilih ) .scroll Kiri ( )
Sintaks ini mengembalikan nilai argumen 'kedudukan' pemilih dalam piksel.
Mari gunakan kaedah yang ditakrifkan secara praktikal.
Kod HTML
Pertama, lihat kod HTML yang dinyatakan:
< bahagian gaya = 'height:150px; width: 200px ;margin:auto;border:2px solid black; overflow: auto;ruang putih: nowrap;' >
< h2 > Selamat datang ke Linuxhint ! h2 >
bahagian >
< butang > Tetapkan Kedudukan butang >
Dalam baris kod di atas:
- '
teg ” mengandungi bahagian dalam dokumen HTML yang disesuaikan dengan bantuan atribut “gaya”. - Di dalam bahagian yang dibuat, ' teg ” mentakrifkan subtajuk.
- Akhir sekali, '
tag ” menambah butang.
Catatan: Ikuti kod HTML yang diberikan dalam semua contoh siaran ini.
Contoh 1: Menggunakan Kaedah 'scrollLeft()' untuk Menetapkan Kedudukan Bar Skrol(Mendatar)
Contoh ini menggunakan kaedah 'scrollLeft()' untuk menetapkan bar skrol(mendatar) pada kedudukan yang ditentukan.
Kod jQuery
Ikuti kod jQuery yang diberikan:
< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skrip >< skrip >
$ ( dokumen ) .sedia ( fungsi ( ) {
$ ( 'butang' ) .klik ( fungsi ( ) {
$ ( 'bahagian' ) .scroll Kiri ( lima puluh ) ;
} ) ;
} ) ;
skrip >
Dalam coretan kod ini:
- Pertama, nyatakan laluan CDN perpustakaan jQuery dalam '
'tag dari laman web rasminya' https://jquery.com/ ” dengan bantuan “ src ” atribut. - Seterusnya, teg “