Kuinka vierittää elementtiin JavaScriptin avulla

Web-sivuja selatessaan elementtiin vierittäminen pitää käyttäjän keskittyneenä kiinnittämällä huomionsa pitkäksi aikaa. Tätä toimintoa voidaan käyttää, kun käyttäjän on vieritettävä yhdellä napsautuksella tai automaatiotestauksen yhteydessä tarkistettava lisätty sisältö välittömästi sivun alareunasta. Tällaisissa skenaarioissa vierittäminen JavaScript-elementtiin lisää toimintoja, jotka voidaan ottaa käyttöön yhdellä napsautuksella ilman paljon käyttäjän toimia ja säästää aikaa.

Tämä opas opastaa sinua vierimään elementtiin JavaScriptin avulla.

Kuinka vierittää elementtiin JavaScriptin avulla?

Voit vierittää elementtiin JavaScriptin avulla:

• • ' scrollIntoView() ”menetelmä
  • ' scroll() ”menetelmä
  • ' scrollTo() ”menetelmä

Mainitut lähestymistavat kuvataan yksitellen!

Tapa 1: Vieritä elementtiin JavaScriptissä käyttämällä scrollIntoView() -menetelmää

' scrollIntoView() ” -menetelmä vierittää elementin Document Object Modelin (DOM) näkyvälle alueelle. Tätä menetelmää voidaan käyttää määritetyn HTML-koodin saamiseksi ja tietyn menetelmän soveltamiseksi siihen onclick-tapahtuman avulla.

Syntaksi

Annetussa syntaksissa ' kohdistaa ” osoittaa kohdistustyypin.

Esimerkki

Lisää seuraavassa esimerkissä seuraava otsikko käyttämällä '

'tunniste:

< h2 > Vieritä elementtiin napsauttamalla painiketta. h2 >

Luo nyt painike, jossa on ' klikkaamalla 'toimintoa kutsuva tapahtuma' scrollElement() :

< -painiketta klikkaamalla = 'scrollElement()' > Vieritä elementtiä -painiketta >
< br >

Määritä sen jälkeen kuvan lähde ja sen tunnus, jotta sitä voidaan vierittää:

< kuva src = 'arvostelu.PNG' id = 'div' >

Määritä lopuksi funktio nimeltä ' scrollElement() ', joka hakee tarvittavan elementin käyttämällä ' document.getElementById() ” -menetelmää ja käytä siinä scrollIntoView() -menetelmää kuvan vierittämiseksi:

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

CSS-koodi

Käytä CSS-koodissa seuraavia mittoja kuvan koon säätämiseen viitaten kuvatunnukseen ' div ”:

#div{
korkeus: 800px;
leveys: 1200px;
ylivuoto: auto;
}

Vastaava tulos on:

Tapa 2: Vieritä elementtiin JavaScriptissä käyttämällä window.scroll()-menetelmää

' window.scroll() ” -menetelmä vierittää ikkunaa dokumentin koordinaattiarvojen mukaan. Tällä menetelmällä voidaan noutaa kuvan tunnus, asettaa sen koordinaatit funktion avulla ja vierittää määritettyä kuvaa.

Syntaksi

window.scroll ( x-koordi, y-koord )

Yllä olevassa syntaksissa ' x-koordi ' viittaa X-koordinaatteihin ja ' y-koordinaatti ” osoittaa Y-koordinaatit.

Seuraava esimerkki selittää esitetyn käsitteen.

Esimerkki

Toista samat vaiheet lisätäksesi otsikon, luodaksesi painikkeen, ottaaksesi onclick-tapahtuman käyttöön ja määrittääksesi kuvalähteen sen tunnuksella:

< h2 > Vieritä elementtiin napsauttamalla painiketta. h2 >
< -painiketta klikkaamalla = 'scrollElement()' > Vieritä elementtiä -painiketta >
< br >
< kuva src = 'kuva.PNG' id = 'div' >

Määritä seuraavaksi funktio nimeltä ' scrollElement() ”. Tässä säädämme koordinaatteja käyttämällä ' window.scroll() ' -menetelmää käyttämällä toimintoa nimeltä ' Sijainti () ' ja lisäämällä se haettuun kuvaelementtiin:

toiminto scrollElement ( ) {
window.scroll ( 0 , Sijainti ( document.getElementById ( 'div' ) ) ) ;
}

Määritä sen jälkeen funktio nimeltä ' Sijainti () ” ottamalla argumentiksi muuttujan obj. Käytä myös ' offsetParent ” omaisuutta, joka pääsee lähimpään esi-isään, jolla ei ole staattista sijaintia, ja palauttaa sen. Kasvata sitten alustettua nykyistä huippuarvoa ' offsetTop '-ominaisuus, joka palauttaa ylimmän sijainnin ylätason (offsetParent) suhteen ja palauttaa arvon ' nykyinen huippu ', kun lisätty ehto arvioidaan tosi:

toiminto asema ( obj ) {
missä virtayläosa = 0 ;
jos ( obj.offsetParent ) {
tehdä {
currenttop += obj.offsetTop;
} sillä aikaa ( ( obj = obj.offsetParent ) ) ;
palata [ nykyinen huippu ] ;
}
}

Muotoile lopuksi luotu säilö tarpeidesi mukaan:

#div{
korkeus: 1000px;
leveys: 1000px;
ylivuoto: auto;
}

Lähtö

Tapa 3: Vieritä elementtiin JavaScriptissä käyttämällä scrollTo()-menetelmää

' scrollTo() ” -menetelmä vierittää määritettyä asiakirjaa määritettyihin koordinaatteihin. Tämä menetelmä voidaan samoin toteuttaa elementin saamiseksi käyttämällä sen id:tä ja suorittamalla tarvittavat toiminnot tietyn kuvan vierittämiseksi DOM:ssa.

Syntaksi

window.scrollTo ( x ja y )

Täällä, ' x ' ja ' Y ” osoittavat x- ja y-koordinaatteja.

Katso seuraava esimerkki.

Esimerkki

Toista ensin yllä kuvatut vaiheet otsikon, onclick-tapahtuman sisältävän painikkeen ja kuvan lisäämiseksi seuraavasti:

< h2 > Vieritä elementtiin napsauttamalla painiketta. h2 >
< -painiketta klikkaamalla = 'scrollElement()' > Vieritä elementtiä -painiketta >
< br >
< img src = 'kuva.JPG' id = 'div' >

Määritä seuraavaksi funktio nimeltä ' scrollElement() ” ja aseta vieritys kutsumalla Position()-metodi scrollTo()-metodissa:

toiminto scrollElement ( ) {
window.scrollTo ( 0 , Sijainti ( document.getElementById ( 'div' ) ) ) ;
}

Määrittele lopuksi funktio nimeltä Position() ja käytä samalla tavalla edellä mainittuja vaiheita määritellyn kuvan koordinaattien asettamiseen:

toiminto asema ( obj ) {
missä virtayläosa = 0 ;
jos ( obj.offsetParent ) {
tehdä {
currenttop += obj.offsetTop;
} sillä aikaa ( ( obj = obj.offsetParent ) ) ;
palata [ nykyinen huippu ] ;
}
}

Lähtö

Olemme keskustelleet kaikista kätevistä tavoista vierittää elementtiin JavaScriptin avulla.

Johtopäätös

Voit vierittää JavaScriptin elementtiin käyttämällä ' scrollIntoView() ' -menetelmää käyttääksesi elementtiä ja käyttääksesi määritettyjä toimintoja, ' window.scroll() ' -menetelmää elementin hakemiseen, sen koordinaattien asettamiseen funktion avulla ja kuvan vierittämiseen tai ' scrollTo() ” -menetelmää elementin hakemiseksi ja vierittääksesi sitä vastaavasti. Tämä blogi esitteli konseptin vierittää elementtiin JavaScriptin avulla.