Kuidas JavaScripti abil elemendini kerida

Veebilehtedel surfates hoiab elemendini kerimine kasutaja keskendunud, püüdes tema tähelepanu pikaks ajaks. Seda funktsiooni saab rakendada siis, kui kasutajal on vaja kerida vaid ühe klõpsuga või automatiseerimise testimise korral koheselt lehe allosas lisatud sisu kontrollida. Selliste stsenaariumide korral lisab JavaScripti elemendini kerimine funktsioone, mida saab rakendada ühe klõpsuga, ilma kasutaja sekkumiseta ja säästab aega.

See juhend juhendab teid JavaScripti abil elemendini kerima.

Kuidas JavaScripti abil elemendini kerida?

JavaScripti abil elemendini kerimiseks võite kasutada järgmist:

• • “ scrollIntoView() ” meetod
  • “ scroll () ” meetod
  • “ kerige() ” meetod

Mainitud lähenemisi illustreeritakse ükshaaval!

1. meetod: kerige JavaScriptis elemendini, kasutades meetodit scrollIntoView().

' scrollIntoView() ” meetod kerib elemendi dokumendiobjekti mudeli (DOM) nähtavale alale. Seda meetodit saab rakendada määratud HTML-i hankimiseks ja konkreetse meetodi rakendamiseks sellele sündmuse onclick abil.

Süntaks

Antud süntaksis ' joondada ” näitab joondamise tüüpi.

Näide

Järgmises näites lisage järgmine pealkiri, kasutades '

” silt:

< h2 > Elemendini kerimiseks klõpsake nuppu. h2 >

Nüüd looge nupp, millel on ' onclick 'sündmus, mis kutsub funktsiooni ' scrollElement() :

< nuppu onclick = 'scrollElement()' > Kerige element nuppu >
< br >

Pärast seda määrake kerimiseks pildi allikas ja selle ID:

< pilt src = 'ülevaade.PNG' id = 'div' >

Lõpuks määrake funktsioon nimega ' scrollElement() ', mis toob vajaliku elemendi, kasutades ' document.getElementById() ” meetodit ja rakendage sellele pildi kerimiseks meetodit scrollIntoView().

funktsiooni kerimiselement ( ) {
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS-kood

CSS-koodis rakendage pildi suuruse reguleerimiseks järgmisi mõõtmeid, viidates pildi ID-le ' div ”:

#div{
kõrgus: 800 pikslit;
laius: 1200 pikslit;
ülevool: auto;
}

Vastav väljund on:

2. meetod: kerige JavaScriptis elemendini, kasutades meetodit window.scroll().

' window.scroll() ” meetod kerib akent vastavalt dokumendis olevatele koordinaatide väärtustele. Seda meetodit saab rakendada pildi ID toomiseks, selle koordinaatide määramiseks funktsiooni abil ja määratud pildi kerimiseks.

Süntaks

aken.kerimine ( x-koor, y-koor )

Ülaltoodud süntaksis ' x-koord ' viitab X-koordinaatidele ja ' y-koor ” tähistab Y-koordinaate.

Järgmine näide selgitab esitatud kontseptsiooni.

Näide

Pealkirja lisamiseks, nupu loomiseks, sündmuse onclick rakendamiseks ja pildi allika määramiseks selle ID-ga korrake samu samme:

< h2 > Elemendini kerimiseks klõpsake nuppu. h2 >
< nuppu onclick = 'scrollElement()' > Kerige element nuppu >
< br >
< pilt src = 'pilt.PNG' id = 'div' >

Järgmisena määrake funktsioon nimega ' scrollElement() ”. Siin kohandame koordinaate, kasutades ' window.scroll() ' meetodit, avades funktsiooni nimega ' Asukoht () ” ja rakendades seda toodud pildielemendile:

funktsiooni kerimiselement ( ) {
aken.kerimine ( 0 , positsioon ( document.getElementById ( 'div' ) ) ) ;
}

Pärast seda määrake funktsioon nimega ' Asukoht () ” võttes argumendiks muutuja obj. Rakendage ka ' offsetParent ” vara, mis pääseb ligi lähimale esivanemale, millel pole staatilist positsiooni, ja tagastab selle. Seejärel suurendage initsialiseeritud praegust tippväärtust nupu ' offsetTop ' atribuut, mis tagastab ülemise positsiooni vanema (offsetParent) suhtes ja tagastab väärtuse ' praegune tipp ” kui lisatud tingimust hinnatakse tõeseks:

funktsiooni positsioon ( obj ) {
kus voolutop = 0 ;
kui ( obj.offsetParent ) {
teha {
currenttop += obj.offsetTop;
} samal ajal ( ( obj = obj.offsetParent ) ) ;
tagasi [ praegune tipp ] ;
}
}

Lõpuks kujundage loodud konteiner vastavalt oma vajadustele:

#div{
kõrgus: 1000 pikslit;
laius: 1000 pikslit;
ülevool: auto;
}

Väljund

3. meetod: kerige JavaScriptis elemendini, kasutades meetodit scrollTo().

' kerige() ” meetod kerib määratud dokumendi määratud koordinaatideni. Seda meetodit saab sarnaselt rakendada ka elemendi hankimiseks, kasutades selle ID-d ja täites DOM-is konkreetse pildi kerimiseks vajalikke funktsioone.

Süntaks

window.scrollTo ( x ja y )

Siin, ' x ” ja „ Y ” osutage x- ja y-koordinaatidele.

Vaadake järgmist näidet.

Näide

Esmalt korrake ülalkirjeldatud samme pealkirja, onclick sündmusega nupu ja pildi lisamiseks järgmiselt.

< h2 > Elemendini kerimiseks klõpsake nuppu. h2 >
< nuppu onclick = 'scrollElement()' > Kerige element nuppu >
< br >
< img src = 'pilt.JPG' id = 'div' >

Järgmisena määrake funktsioon nimega ' scrollElement() ” ja seadke kerimine, kutsudes meetodis scrollTo () meetod Position()

funktsiooni kerimiselement ( ) {
window.scrollTo ( 0 , positsioon ( document.getElementById ( 'div' ) ) ) ;
}

Lõpuks määrake funktsioon nimega Position() ja rakendage samamoodi ülalkirjeldatud samme määratud pildi koordinaatide määramiseks:

funktsiooni positsioon ( obj ) {
kus voolutop = 0 ;
kui ( obj.offsetParent ) {
teha {
currenttop += obj.offsetTop;
} samal ajal ( ( obj = obj.offsetParent ) ) ;
tagasi [ praegune tipp ] ;
}
}

Väljund

Oleme arutanud kõiki mugavaid meetodeid JavaScripti abil elemendini kerimiseks.

Järeldus

JavaScriptis elemendini kerimiseks kasutage ' scrollIntoView() ' meetod elemendile juurdepääsuks ja määratud funktsioonide rakendamiseks, ' window.scroll() ” meetod elemendi toomiseks, selle koordinaatide määramiseks funktsiooni abil ja pildi kerimiseks või kerige() ” meetodil, et element hankida ja seda vastavalt kerida. See ajaveeb demonstreeris kontseptsiooni kerida JavaScripti abil elemendini.