A weblapokon való böngészés közben egy elemre görgetés közben a felhasználó fókuszban marad azáltal, hogy hosszú ideig leköti a figyelmét. Ez a funkció akkor alkalmazható, ha a felhasználónak egyetlen kattintással kell görgetnie, vagy automatizálási tesztelés esetén azonnal ellenőriznie kell a hozzáadott tartalmat az oldal alján. Ilyen forgatókönyvekben a JavaScript egy elemére való görgetés olyan funkciókat ad, amelyek egyetlen kattintással, sok felhasználói beavatkozás nélkül alkalmazhatók, és időt takarít meg.
Ez a kézikönyv elvezeti Önt egy elemhez való görgetéshez JavaScript használatával.
Hogyan lehet egy elemre görgetni JavaScript használatával?
Egy elemhez való görgetéshez JavaScript használatával a következőket használhatja:
-
- ' scrollIntoView() ” módszerrel
- ' tekercs() ” módszerrel
- ' scrollTo() ” módszerrel
Az említett megközelítéseket egyenként illusztráljuk!
1. módszer: Görgessen egy elemhez a JavaScriptben a scrollIntoView() metódus használatával
Az ' scrollIntoView() ” metódus görgeti az elemet a Document Object Model (DOM) látható területére. Ezzel a módszerrel lekérhető a megadott HTML, és az onclick esemény segítségével az adott metódus alkalmazható rá.
Szintaxis
elem.scrollIntoView ( igazítsa )
Az adott szintaxisban a „ igazítsa ” jelzi az igazítás típusát.
Példa
A következő példában adja hozzá a következő címsort a „ ” címke:
< h2 > Kattintson a gombra az elemhez való görgetéshez. h2 >
Most hozzon létre egy gombot egy „ kattintásra ' esemény meghívja a függvényt ' scrollElement() :
< br >
Ezután adja meg a kép forrását és azonosítóját a görgetéshez:
Végül definiáljon egy '' nevű függvényt scrollElement() ', amely lekéri a kívánt elemet a ' document.getElementById() ” metódust, és alkalmazza rajta a scrollIntoView() metódust a kép görgetéséhez:
var element = document.getElementById ( 'div' ) ;
elem.scrollIntoView ( ) ;
}
CSS kód
A CSS kódban alkalmazza a következő méreteket a képméret beállításához a képazonosítóra hivatkozva ' div ”:
#div{magasság: 800 képpont;
szélesség: 1200 képpont;
túlcsordulás: auto;
}
A megfelelő kimenet a következő lesz:
2. módszer: Görgessen egy elemhez a JavaScriptben a window.scroll() metódus használatával
Az ' window.scroll() ” metódus görgeti az ablakot a dokumentumban szereplő koordinátaértékek szerint. Ez a módszer megvalósítható a képazonosító lekérésére, a koordinátáinak egy függvény segítségével történő beállítására és a megadott kép görgetésére.
Szintaxis
ablak.tekercs ( x-koord, y-koord )
A fenti szintaxisban: ' x-coord ' az X koordinátákra utal, és a ' y-koord ” jelzi az Y koordinátákat.
A következő példa a megfogalmazott koncepciót magyarázza.
Példa
Ismételje meg ugyanazokat a lépéseket a fejléc hozzáadásához, egy gomb létrehozásához, az onclick esemény alkalmazásához, és adja meg a kép forrását az azonosítójával:
< h2 > Kattintson a gombra az elemhez való görgetéshez. h2 >< gomb kattintásra = 'scrollElement()' > Görgetés elem gomb >
< br >
< kép src = 'kép.PNG' id = 'div' >
Ezután definiáljon egy '' nevű függvényt scrollElement() ”. Itt beállítjuk a koordinátákat a „ window.scroll() ' módszert a '' nevű függvény elérésével Pozíció() ” és alkalmazza azt a lekért képelemre:
ablak.tekercs ( 0 , Pozíció ( document.getElementById ( 'div' ) ) ) ;
}
Ezután definiáljon egy '' nevű függvényt Pozíció() ” egy obj változót véve argumentumként. Alkalmazza továbbá a „ offsetParent ” tulajdonságot, amely hozzáfér a legközelebbi őshöz, amelynek nincs statikus pozíciója, és visszaadja azt. Ezután növelje az inicializált aktuális felső értéket a „ offsetTop ” tulajdonság, amely visszaadja a felső pozíciót a szülőhöz képest (offsetParent) és a „ jelenlegi felső ” amikor a hozzáadott feltétel igaznak van értékelve:
ahol currenttop = 0 ;
ha ( obj.offsetParent ) {
csináld {
currenttop += obj.offsetTop;
} míg ( ( obj = obj.offsetParent ) ) ;
Visszatérés [ jelenlegi felső ] ;
}
}
Végül stílusozza a létrehozott tárolót igényei szerint:
magasság: 1000px;
szélesség: 1000px;
túlcsordulás: auto;
}
Kimenet
3. módszer: Görgessen egy elemhez a JavaScriptben a scrollTo() metódus használatával
Az ' scrollTo() ” metódus görgeti a megadott dokumentumot a hozzárendelt koordinátákhoz. Ez a módszer hasonlóképpen megvalósítható az elem azonosítójának felhasználásával, és a szükséges funkcionalitás végrehajtásával az adott kép görgetéséhez a DOM-on.
Szintaxis
window.scrollTo ( x és y )
Itt, ' x ” és „ Y ” mutasson az x és y koordinátákra.
Vessen egy pillantást a következő példára.
Példa
Először ismételje meg a fent tárgyalt lépéseket a címsor, az onclick eseményt tartalmazó gomb és a kép hozzáadásához az alábbiak szerint:
< h2 > Kattintson a gombra az elemhez való görgetéshez. h2 >< gomb kattintásra = 'scrollElement()' > Görgetés elem gomb >
< br >
< img src = 'kép.JPG' id = 'div' >
Ezután definiáljon egy '' nevű függvényt scrollElement() ” és állítsa be a görgetést a Position() metódus meghívásával a scrollTo() metódusban:
window.scrollTo ( 0 , Pozíció ( document.getElementById ( 'div' ) ) ) ;
}
Végül definiáljon egy Position() nevű függvényt, és hasonló módon alkalmazza a fent tárgyalt lépéseket a megadott kép koordinátáinak beállításához:
ahol currenttop = 0 ;
ha ( obj.offsetParent ) {
csináld {
currenttop += obj.offsetTop;
} míg ( ( obj = obj.offsetParent ) ) ;
Visszatérés [ jelenlegi felső ] ;
}
}
Kimenet
Megbeszéltük az összes kényelmes módszert az elemhez való görgetéshez JavaScript használatával.
Következtetés
Ha egy JavaScript elemhez szeretne görgetni, használja a ' scrollIntoView() ” módszer az elem eléréséhez és a megadott funkciók alkalmazásához, a „ window.scroll() ” módszerrel lekérheti az elemet, beállíthatja a koordinátáit egy függvény segítségével, és görgetheti a képet, vagy használja a „ scrollTo() ” metódussal, hogy lekérje az elemet, és ennek megfelelően görgessen. Ez a blog bemutatta azt a koncepciót, hogy JavaScript használatával görgessen egy elemre.