Vue Academy · Oppitunti

Vierityksen toiminnan määritys

scrollBehavior(to, from, savedPosition), pehmeä vieritys, vieritys hashiin ja sijainnin palautus

Oppitunti 3/413 vaihetta

Vierityksen toiminnan määritys on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Vierityksen hallinta navigoinnin aikana

Yksisivuisessa sovelluksessa sivua ei ladata uudelleen, joten selain ei nollaa vieritystä puolestanne. Vuen Routerin scrollBehavior-funktiolla voitte määrittää, mihin sivu vieritetään jokaisen navigoinnin jälkeen.

Missä se sijaitsee

Välittäkää scrollBehavior reititintä luotaessa. Se suoritetaan jokaisen navigoinnin yhteydessä.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

Kolme parametria

Se saa parametreiksi to-arvon (kohdereitti), from-arvon (nykyinen reitti) ja savedPosition-arvon. Jälkimmäinen on muu kuin null vain silloin, kun navigointi tehdään selaimen takaisin- tai eteenpäin-painikkeilla.

Vieritys uusien reittien alkuun

Yksinkertaisin toimintatapa on vierittää sivu alkuun aina, kun käyttäjä siirtyy uudelle sivulle.

scrollBehavior(to, from, savedPosition) {
  return { top: 0 }
}

Sijainnin palauttaminen palattaessa

Kun savedPosition on olemassa, palauttakaa se, jotta takaisin-painike vie käyttäjän täsmälleen siihen kohtaan, jossa hän oli — kuten selaimen alkuperäinen toiminta.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

Miksi savedPosition on tärkeä

Ilman savedPosition-sijainnin palauttamista takaisin siirtyminen veisi käyttäjän pitkän, vieritetyn luettelon alkuun. Sen palauttaminen säilyttää käyttäjän sijainnin.

Vierittäminen ankkuriin

Jos kohde-URL sisältää hajautteen, kuten #section, vierittäkää kyseiseen elementtiin palauttamalla el-valitsin.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

Tasainen vieritys

Lisätkää behavior: 'smooth', jotta vieritys animoituu äkillisen siirtymisen sijaan.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

Kiinteän ylätunnisteen huomioiminen

Kiinnitetty ylätunniste voi peittää kohdeankkurin. Lisätkää top-arvo siirtymäksi, jotta elementti sijoittuu ylätunnisteen alapuolelle.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

Vierityksen viivyttäminen

Jos sisältö latautuu asynkronisesti, palauttakaa Promise, joka ratkaisee sijainnin viiveen jälkeen, jotta kohde on olemassa vierityksen alkaessa.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

Sääntöjen yhdistäminen

Täydellinen käsittelijä asettaa etusijalle tallennetun sijainnin, sen jälkeen hajautteeseen perustuvat ankkurit ja lopuksi oletusarvoisesti sivun alun.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

Pikatesti

Testatkaa, mitä tiedätte vierityksen toiminnasta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

scrollBehavior hallitsee vieritystä navigoinnin aikana:

Se saa parametreiksi to-, from- ja savedPosition-arvot.
Palauttakaa savedPosition takaisin-painikkeen sijainnin palauttamiseksi.
Palauttakaa { el: to.hash } ankkuriin vierittämistä varten.
Palauttakaa { top: 0 } uusiin reitteihin siirryttäessä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vierityksen toiminnan määritys” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Vierityksen toiminnan määritys”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Vierityksen toiminnan määritys”?

scrollBehavior(to, from, savedPosition), pehmeä vieritys, vieritys hashiin ja sijainnin palautus Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Vierityksen toiminnan määritys”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy