Ang pag-scroll ay nagbibigay-daan sa mga user na tingnan ang mga web page/mahabang dokumento sa kaliwa at kanan o pataas at pababa. Maaari itong isagawa sa pamamagitan ng pagdaragdag ng pahalang at patayong mga scroll bar depende sa nilalaman. Ang mga sukat ng scroll bar gaya ng taas at lapad ay itinakda bilang default. Gayunpaman, maaaring i-customize ang mga ito sa tulong ng kanilang nauugnay na mga pamamaraan ng JavaScript. Sa sandaling maidagdag o maitakda ang mga ito sa dokumento, madaling matukoy ng user ang mga ito gamit ang built-in na ' scrollTop() ', at ang ' scrollLeft() ' paraan.
Ipinapaliwanag ng post na ito ang layunin, at functionality ng 'scrollLeft()' na paraan sa jQuery.
Ano ang 'scrollLeft()' Method sa jQuery?
Ang ' scrollLeft() ” paraan ay partikular na idinisenyo para sa pahalang na scroll bar upang itakda at makuha ang posisyon nito sa mga pixel. Kinakalkula nito ang napiling posisyon ng scroll bar ng HTML element. Ito ay kadalasang inilalapat sa mga elemento ng div, lalagyan, at seksyon.
Syntax (Itakda ang Horizontal Scrollbar Position)
$ ( tagapili ) .scrollPakaliwa ( posisyon )
Kinukuha ng syntax sa itaas ang integer value bilang ' posisyon ” argument upang itakda ang pahalang na posisyon ng scroll bar ng target na tagapili.
Syntax (Kumuha ng Horizontal Scrollbar Position)
$ ( tagapili ) .scrollPakaliwa ( )
Ibinabalik ng syntax na ito ang value ng argument na 'posisyon' ng selector sa mga pixel.
Gamitin natin ang tinukoy na paraan nang praktikal.
HTML Code
Una, tingnan ang nakasaad na HTML code:
< seksyon istilo = 'height:150px; width: 200px ;margin:auto;border:2px solid black; overflow: auto;white-space: nowrap;' >
< h2 > Maligayang pagdating sa Linuxhint ! h2 >
seksyon >
< pindutan > Itakda ang Posisyon pindutan >
Sa mga linya ng code sa itaas:
- Ang '
Ang tag na ” ay naglalaman ng isang seksyon sa loob ng HTML na dokumento na na-customize sa tulong ng attribute na “style”. - Sa loob ng ginawang seksyon, ang ' Tinutukoy ng tag na ” ang subheading.
- Panghuli, ang ' ” nagdaragdag ng isang button ang tag.
Tandaan: Sundin ang ibinigay na HTML code sa lahat ng mga halimbawa ng post na ito.
Halimbawa 1: Paglalapat ng Paraang “scrollLeft()” para Itakda ang Posisyon ng Scrollbar(Horizontal)
Ang halimbawang ito ay gumagamit ng 'scrollLeft()' na paraan upang itakda ang scrollbar(pahalang) sa tinukoy na posisyon.
jQuery Code
Sundin ang ibinigay na jQuery code:
< iskrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > iskrip >< iskrip >
$ ( dokumento ) .handa na ( function ( ) {
$ ( 'button' ) .click ( function ( ) {
$ ( 'seksyon' ) .scrollPakaliwa ( limampu ) ;
} ) ;
} ) ;
iskrip >
Sa snippet ng code na ito:
- Una, tukuyin ang CDN path ng jQuery library sa “