Kā ritināt līdz elementam, izmantojot JavaScript

Sērfojot tīmekļa lapās, ritinot līdz elementam, lietotājs ilgstoši koncentrējas, piesaistot viņa uzmanību. Šo funkcionalitāti var izmantot, ja lietotājam ir nepieciešams ritināt, izmantojot tikai vienu klikšķi, vai automatizācijas pārbaudes gadījumā, lai uzreiz pārbaudītu pievienoto saturu lapas apakšā. Šādos scenārijos ritinot līdz JavaScript elementam, tiek pievienota funkcionalitāte, ko var lietot ar vienu klikšķi bez lielas lietotāja iejaukšanās, un tas ietaupa laiku.

Šī rokasgrāmata palīdzēs ritināt līdz elementam, izmantojot JavaScript.

Kā ritināt līdz elementam, izmantojot JavaScript?

Lai ritinātu līdz elementam, izmantojot JavaScript, varat izmantot:

• • ' scrollIntoView() ” metode
  • ' scroll () ” metode
  • ' ritiniet uz() ” metode

Minētās pieejas tiks ilustrētas pa vienai!

1. metode: ritiniet līdz elementam JavaScript, izmantojot metodi scrollIntoView().

' scrollIntoView() ” metode ritina elementu dokumenta objekta modeļa (DOM) redzamajā apgabalā. Šo metodi var izmantot, lai iegūtu norādīto HTML un piemērotu tam konkrēto metodi, izmantojot onclick notikumu.

Sintakse

Dotajā sintaksē ' izlīdzināt ” norāda līdzināšanas veidu.

Piemērs

Nākamajā piemērā pievienojiet šādu virsrakstu, izmantojot '

'atzīme:

< h2 > Noklikšķiniet uz pogas, lai ritinātu līdz elementam. h2 >

Tagad izveidojiet pogu ar ' onclick 'notikums, kas izsauc funkciju' scrollElement() :

< pogu onclick = 'scrollElement()' > Ritināšanas elements pogu >
< br >

Pēc tam norādiet attēla avotu un tā ID, lai to varētu ritināt:

< attēlu src = 'pārskats.PNG' id = 'div' >

Visbeidzot, definējiet funkciju ar nosaukumu ' scrollElement() ”, kas ienesīs vajadzīgo elementu, izmantojot document.getElementById() ” metodi un izmantojiet tai scrollIntoView() metodi, lai ritinātu attēlu:

funkciju scrollElement ( ) {
var elements = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS kods

CSS kodā izmantojiet šādus izmērus, lai pielāgotu attēla izmēru, atsaucoties uz attēla ID ' div ”:

#div{
augstums: 800 pikseļi;
platums: 1200 pikseļi;
pārplūde: auto;
}

Atbilstošā izvade būs:

2. metode: ritiniet līdz elementam JavaScript, izmantojot metodi window.scroll().

' window.scroll() ” metode ritina logu atbilstoši koordinātu vērtībām dokumentā. Šo metodi var ieviest, lai iegūtu attēla ID, iestatītu tā koordinātas, izmantojot funkciju, un ritinātu norādīto attēlu.

Sintakse

logs.ritināt ( x-koorda, y-koorda )

Iepriekš minētajā sintaksē ' x-koords ” attiecas uz X koordinātām un „ y-koorda ” norāda Y koordinātas.

Nākamais piemērs izskaidro norādīto jēdzienu.

Piemērs

Atkārtojiet tās pašas darbības, lai pievienotu virsrakstu, izveidotu pogu, lietotu notikumu onclick un norādītu attēla avotu ar tā ID:

< h2 > Noklikšķiniet uz pogas, lai ritinātu līdz elementam. h2 >
< pogu onclick = 'scrollElement()' > Ritināšanas elements pogu >
< br >
< attēlu src = 'attēls.PNG' id = 'div' >

Pēc tam definējiet funkciju ar nosaukumu ' scrollElement() ”. Šeit mēs pielāgosim koordinātas, izmantojot ' window.scroll() ' metodi, piekļūstot funkcijai ar nosaukumu ' Pozīcija () ” un piemērojot to ienestajam attēla elementam:

funkciju scrollElement ( ) {
logs.ritināt ( 0 , Pozīcija ( document.getElementById ( 'div' ) ) ) ;
}

Pēc tam definējiet funkciju ar nosaukumu ' Pozīcija () ” par argumentu ņemot mainīgo obj. Tāpat izmantojiet ' offsetParent ” īpašumu, kas piekļūs tuvākajam sencim, kuram nav statiskas pozīcijas, un atdos to. Pēc tam palieliniet inicializēto pašreizējo maksimālo vērtību, izmantojot ' nobīdeAugšā ” rekvizīts, kas atgriezīs augstāko pozīciju attiecībā pret vecāku (offsetParent) un atgriež vērtību “ pašreizējais tops ” ja pievienotais nosacījums tiek novērtēts kā patiess:

funkciju Pozīcija ( obj ) {
kur strāvas augšdaļa = 0 ;
ja ( obj.offsetParent ) {
darīt {
currenttop += obj.offsetTop;
} kamēr ( ( obj = obj.offsetParent ) ) ;
atgriezties [ strāvas augšdaļa ] ;
}
}

Visbeidzot, izveidojiet izveidotā konteinera stilu atbilstoši savām prasībām:

#div{
augstums: 1000 pikseļi;
platums: 1000 pikseļi;
pārplūde: auto;
}

Izvade

3. metode: ritiniet līdz elementam JavaScript, izmantojot metodi scrollTo().

' ritiniet uz() ” metode ritina norādīto dokumentu līdz piešķirtajām koordinātām. Šo metodi var līdzīgi īstenot, lai iegūtu elementu, izmantojot tā ID un veicot nepieciešamo funkcionalitāti, lai ritinātu konkrēto attēlu DOM.

Sintakse

window.scrollTo ( x un y )

Šeit, ' x ' un ' Y ” norāda uz x un y koordinātām.

Apskatiet tālāk redzamo piemēru.

Piemērs

Vispirms atkārtojiet iepriekš aprakstītās darbības, lai pievienotu virsrakstu, pogu ar notikumu onclick un attēlu, kā norādīts tālāk.

< h2 > Noklikšķiniet uz pogas, lai ritinātu līdz elementam. h2 >
< pogu onclick = 'scrollElement()' > Ritināšanas elements pogu >
< br >
< img src = 'attēls.JPG' id = 'div' >

Pēc tam definējiet funkciju ar nosaukumu ' scrollElement() ” un iestatiet ritināšanu, izsaucot Position() metodi scrollTo() metodē:

funkciju scrollElement ( ) {
window.scrollTo ( 0 , Pozīcija ( document.getElementById ( 'div' ) ) ) ;
}

Visbeidzot, definējiet funkciju ar nosaukumu Position() un līdzīgi veiciet iepriekš aprakstītās darbības, lai iestatītu norādītā attēla koordinātas:

funkciju Pozīcija ( obj ) {
kur strāvas augšdaļa = 0 ;
ja ( obj.offsetParent ) {
darīt {
currenttop += obj.offsetTop;
} kamēr ( ( obj = obj.offsetParent ) ) ;
atgriezties [ strāvas augšdaļa ] ;
}
}

Izvade

Mēs esam apsprieduši visas ērtās metodes, kā ritināt līdz elementam, izmantojot JavaScript.

Secinājums

Lai ritinātu līdz elementam JavaScript, izmantojiet ' scrollIntoView() ”, lai piekļūtu elementam un lietotu norādīto funkcionalitāti, window.scroll() ” metodi, lai iegūtu elementu, iestatītu tā koordinātas, izmantojot funkciju, un ritinātu attēlu vai izmantotu ritiniet uz() ” metodi, lai izgūtu elementu un atbilstoši ritinātu to. Šis emuārs demonstrēja ideju ritināt līdz elementam, izmantojot JavaScript.