CSS-i kerimise käitumine: põhjalik juhend sujuvaks kerimiseks

Tänapäeva veebiarendusmaailmas on kasutajakogemus (UX) kõige olulisem. Üks näiliselt väike detail, mis võib oluliselt mõjutada UX-i, on kerimise sujuvus. Enam pole järske hüppeid sektsioonide vahel! CSS-i omadus scroll-behavior pakub lihtsa, kuid võimsa viisi sujuva kerimise rakendamiseks, parandades veebisaidi juurdepääsetavust ja üldist kasutajate rahulolu. See juhend annab põhjaliku ülevaate scroll-behavior-ist, hõlmates kõike alates põhirakendusest kuni täiustatud kohandamise ja brauseri ühilduvuse kaalutlusteni tõeliselt globaalsele publikule.

Mis on CSS-i kerimise käitumine?

CSS-i omadus scroll-behavior võimaldab teil määrata kerimiskasti kerimiskäitumist. Vaikimisi on kerimine hetkeline, mille tulemuseks on järsud hüpped, kui navigeerite lehe erinevate osade vahel. scroll-behavior: smooth; muudab seda, pakkudes sujuvat animeeritud üleminekut kerimise käivitamisel, kas ankurlingi klõpsamisel, nooleklahvide kasutamisel või kerimise programmilise algatamise korral.

scroll-behavior: smooth; põhirakendus

Lihtsaim viis sujuva kerimise lubamiseks on rakendada omadus scroll-behavior: smooth; elemendile html või body. See muudab kogu vaateava kerimise sujuvaks.

Rakendamine elemendile html:

Üldiselt on see eelistatud meetod, kuna see mõjutab kogu lehe kerimiskäitumist.

html {
  scroll-behavior: smooth;
}

Rakendamine elemendile body:

See meetod töötab samuti, kuid on vähem levinud, kuna see mõjutab ainult sisu elemendis body.

body {
  scroll-behavior: smooth;
}

Näide: Kujutage ette lihtsat veebilehte, millel on mitu pealkirjadega identifitseeritud sektsiooni. Kui kasutaja klõpsab navigeerimislingil, mis viitab ühele neist sektsioonidest, kerib leht sujuvalt sellesse sektsiooni, selle asemel et kohe sellesse sektsiooni hüpata.

Sujuv kerimine ankurlinkidega

Ankurlingid (tuntud ka kui fragmendi identifikaatorid) on tavaline viis veebilehel navigeerimiseks. Neid kasutatakse tavaliselt sisukordades või ühe lehe veebisaitidel. Omadusega scroll-behavior: smooth; käivitab ankurlingi klõpsamine sujuva kerimise animatsiooni.

Ankurlinkide HTML-struktuur:

  
Sektsioon 1
  
Sektsiooni 1 sisu...



  
Sektsioon 2
  
Sektsiooni 2 sisu...



  
Sektsioon 3
  
Sektsiooni 3 sisu...

Kui CSS-i reegel html { scroll-behavior: smooth; } on paigas, siis lingil klõpsates navigeerimisel tekib sujuv kerimise animatsioon vastavasse sektsiooni.

Konkreetsete keritavate elementide sihtimine

Samuti saate rakendada scroll-behavior: smooth; konkreetsetele keritavatele elementidele, näiteks div-idele, millel on overflow: auto; või overflow: scroll;. See võimaldab teil lubada sujuva kerimise konkreetses konteineris, mõjutamata ülejäänud lehte.

Näide: sujuv kerimine Div-is:

  
Siin on palju sisu...
  
Rohkem sisu...
  
Veelgi rohkem sisu...

.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

Selles näites kerib sujuvalt ainult .scrollable-container-i sisu.

Programmilise sujuva kerimine JavaScriptiga

Kuigi scroll-behavior: smooth; käsitleb kasutaja interaktsioonist (nagu ankurlinkide klõpsamine) käivitatud kerimist, võib teil olla vaja kerimist algatada programmiliselt JavaScripti abil. Meetodid scrollTo() ja scrollBy() koos valikuga behavior: 'smooth' pakuvad viisi selle saavutamiseks.

scrollTo() kasutamine:

Meetod scrollTo() kerib akent kindlale koordinaadile.

window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

See kood kerib akent sujuvalt vertikaalselt 500 pikslit ülevalt.

scrollBy() kasutamine:

Meetod scrollBy() kerib akent määratud summa võrra.

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

See kood kerib akent sujuvalt 100 pikslit allapoole.

Näide: sujuv kerimine elemendile nupu klõpsamisel:

Kerige sektsioonile 3


  
Sektsioon 3
  
Sektsiooni 3 sisu...

const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

Nupu klõpsamisel kerib leht sujuvalt elemendile "Sektsioon 3", kasutades scrollIntoView(). Seda meetodit eelistatakse sageli, kuna see arvutab sihtelemendi täpse positsiooni, olenemata dünaamilistest sisumuudatustest.

Kerimiskiiruse ja -pehmuse kohandamine

Kuigi scroll-behavior: smooth; pakub vaikimisi sujuvat kerimise animatsiooni, ei saa te CSS-i abil otse juhtida kiirust ega pehmust (animatsiooni muutmise kiirus aja jooksul). Kohandamine nõuab JavaScripti.

Oluline märkus: Liiga pikad või keerulised animatsioonid võivad UX-ile kahjulikud olla, põhjustades potentsiaalselt merehaigust või takistades kasutaja interaktsiooni. Püüdke saavutada peeneid ja tõhusaid animatsioone.

JavaScriptipõhine kohandamine:

Kerimiskiiruse ja -pehmuse kohandamiseks peate kasutama JavaScripti, et luua kohandatud animatsioon. Tavaliselt hõlmab see raamatukogude, nagu GSAP (GreenSock Animation Platform), kasutamist või oma animatsiooniloogika juurutamist requestAnimationFrame abil.

Näide requestAnimationFrame kasutamisest:

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // Easing function (e.g., easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// Example usage:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milliseconds
smoothScroll(targetElement, scrollDuration);

See kood määratleb funktsiooni smoothScroll, mis võtab sisendina sihtelemendi ja kestuse. See kasutab requestAnimationFrame, et luua sujuv animatsioon, ja sisaldab pehmendusfunktsiooni (selles näites easeInOutQuad), et juhtida animatsiooni tempot. Erinevate animatsiooniefektide saavutamiseks leiate veebist palju erinevaid pehmendusfunktsioone.

Juurdepääsetavuse kaalutlused

Kuigi sujuv kerimine võib UX-i parandada, on oluline arvestada juurdepääsetavusega. Mõnele kasutajale võib sujuv kerimine olla häiriv või isegi desorienteeriv. Sujuva kerimise keelamise võimaluse pakkumine on kaasavuse jaoks hädavajalik.

Kasutaja eelistuse juurutamine:

Parim lähenemisviis on austada kasutaja operatsioonisüsteemi eelistusi vähendatud liikumise suhtes. Meediapäringud, nagu prefers-reduced-motion, võimaldavad teil tuvastada, kas kasutaja on oma süsteemiseadetes taotlenud vähendatud liikumist.

prefers-reduced-motion kasutamine:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Override smooth scrolling */
  }
}

See kood keelab sujuva kerimise, kui kasutaja on oma operatsioonisüsteemis lubanud seadistuse "vähenda liikumist". Lippu !important kasutatakse selle tagamiseks, et see reegel tühistab kõik muud scroll-behavior deklaratsioonid.

Käsitsi lüliti pakkumine:

Saate pakkuda ka käsitsi lülitit (nt märkeruut), mis võimaldab kasutajatel sujuva kerimise lubada või keelata. See annab kasutajatele oma kogemuse üle rohkem otsest kontrolli.

  
  Luba sujuv kerimine

const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

See kood lisab märkeruudu, mis võimaldab kasutajatel sujuva kerimise sisse või välja lülitada. Pidage meeles, et salvestate selle kasutaja eelistuse (nt kohaliku salvestusruumi abil), et see jääks seansside vahel meelde.

Brauseri ühilduvus

scroll-behavior-il on hea brauseri tugi, kuid on oluline olla teadlik vanematest brauseritest, mis seda ei pruugi toetada. Siin on brauseri ühilduvuse kokkuvõte:

• Chrome: toetatud alates versioonist 61
• Firefox: toetatud alates versioonist 36
• Safari: toetatud alates versioonist 14.1 (osaline tugi varasemates versioonides)
• Edge: toetatud alates versioonist 79
• Opera: toetatud alates versioonist 48
• Internet Explorer: ei toetata

Tagavara pakkumine vanematele brauseritele:

Brauserite puhul, mis ei toeta scroll-behavior, saate kasutada JavaScripti polütäidet. Polütäide on koodijupp, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites.

Näide: polütäite kasutamine:

Saadaval on mitu JavaScripti teeki, mis pakuvad sujuva kerimise polütäiteid. Üks võimalus on kasutada raamatukogu nagu "smoothscroll-polyfill".

See kood sisaldab teeki "smoothscroll-polyfill" ja initsialiseerib selle. See pakub sujuva kerimise funktsionaalsust vanemates brauserites, mis algselt ei toeta scroll-behavior.

Tingimuslik laadimine: Kaaluge polütäite tingimuslikku laadimist skriptilaaduri või funktsioonituvastuse abil, et vältida tarbetut koormust kaasaegsetes brauserites.

Parimad tavad sujuvaks kerimiseks

Siin on mõned parimad tavad, mida sujuva kerimise juurutamisel meeles pidada:

• Hoidke see peen: Vältige liiga pikki või keerulisi animatsioone, mis võivad olla häirivad või põhjustada merehaigust.
• Kaaluge juurdepääsetavust: Pakkuge kasutajatele võimalus sujuv kerimine keelata, kui nad leiavad, et see on desorienteeriv. Austage kasutaja eelistusi vähendatud liikumise suhtes.
• Testige erinevates seadmetes: Veenduge, et sujuv kerimine toimib hästi erinevates seadmetes ja ekraanisuurustes.
• Optimeerige jõudlust: Vältige sujuva kerimise animatsioonide liigset käivitamist, kuna see võib jõudlust mõjutada.
• Kasutage sisukaid ankurlinke: Veenduge, et ankurlingid viitavad lehel selgelt määratletud sektsioonidele.
• Vältige kattuvat sisu: Olge teadlik fikseeritud päistest või muudest elementidest, mis võivad kerimise sihtmärki kattuda. Kasutage CSS-i omadusi, nagu scroll-padding-top, või JavaScripti, et vastavalt kerimisasendit reguleerida.

Levinud probleemid ja lahendused

Siin on mõned levinud probleemid, millega sujuva kerimise juurutamisel võite kokku puutuda, ja nende lahendused:

• Probleem: Sujuv kerimine ei tööta.
  • Lahendus: Kontrollige veel kord, kas scroll-behavior: smooth; on rakendatud elemendile html või body. Veenduge, et ankurlingid viitavad õigesti vastavatele sektsioonidele. Veenduge, et pole vastuolulisi CSS-i reegleid, mis omadust scroll-behavior tühistavad.
• Probleem: Sujuv kerimine on liiga aeglane või liiga kiire.
  • Lahendus: Kohandage kerimiskiirust JavaScripti abil, nagu on kirjeldatud jaotises "Kerimiskiiruse ja -pehmuse kohandamine". Katsetage erinevate pehmendusfunktsioonidega, et leida õige tasakaal sujuvuse ja reageerimisvõime vahel.
• Probleem: Fikseeritud päis katab kerimise sihtmärgi.
  • Lahendus: Kasutage CSS-is omadust scroll-padding-top, et lisada kerimiskonteineri ülaossa täidet. Teise võimalusena kasutage JavaScripti fikseeritud päise kõrguse arvutamiseks ja kerimisasendi vastavaks reguleerimiseks.
• Probleem: Sujuv kerimine segab muud JavaScripti funktsionaalsust.
  • Lahendus: Veenduge, et teie JavaScripti kood ei läheks sujuva kerimise animatsiooniga vastuollu. Erinevate JavaScripti funktsioonide täitmise koordineerimiseks kasutage sündmuste kuulajaid ja tagasihelistamisi.

Täiustatud tehnikad ja kaalutlused

Lisaks põhiteadmistele on sujuva kerimise juurutamise täiustamiseks mitmeid täiustatud tehnikaid ja kaalutlusi.

scroll-margin ja scroll-padding kasutamine:

Need CSS-i omadused pakuvad kerimise klõpsamiskäitumise üle suuremat kontrolli ja aitavad vältida fikseeritud päiste või jaluste tõttu sisu varjamist.

• scroll-margin: määratleb kerimise klõpsamisala ümber oleva veerise.
• scroll-padding: määratleb kerimise klõpsamisala ümber oleva täite.

Näide:

section {
  scroll-margin-top: 20px; /* Lisab iga sektsiooni kohale kerimisel 20px veerise */
}

html {
  scroll-padding-top: 60px; /* Lisab vaateava ülaossa kerimisel 60px täite */
}

Kombineerimine Intersection Observer API-ga:

Intersection Observer API võimaldab teil tuvastada, millal element siseneb vaateavasse või väljub sellest. Saate kasutada seda API-t, et käivitada elementide nähtavuse põhjal sujuva kerimise animatsioone.

Näide:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Tehke midagi, kui sektsioon on vaates
      console.log('Sektsioon ' + entry.target.id + ' on vaates');
    } else {
      // Tehke midagi, kui sektsioon pole vaates
      console.log('Sektsioon ' + entry.target.id + ' pole vaates');
    }
  });
}, {
  threshold: 0.5 // Käivitage, kui 50% elemendist on nähtav
});

sections.forEach(section => {
  observer.observe(section);
});

See kood kasutab Intersection Observer API-t, et tuvastada, millal iga sektsioon siseneb vaateavasse või väljub sellest. Seejärel saate seda teavet kasutada kohandatud sujuva kerimise animatsioonide või muude visuaalsete efektide käivitamiseks.

Globaalsed vaatenurgad kerimise käitumisele

Kuigi sujuva kerimise tehniline juurutamine on kogu maailmas ühtne, võivad kultuurilised ja kontekstuaalsed kaalutlused mõjutada selle tajutavat kasutatavust.

• Interneti kiirus: Aeglasemate internetiühendustega piirkondades võivad suured JavaScripti teegid kohandatud animatsioonide jaoks negatiivselt mõjutada laadimisaegu ja UX-i. Seadke prioriteediks kerged lahendused ja tingimuslik laadimine.
• Seadme võimalused: Optimeerige laias valikus seadmeid, alates tipptasemel lauaarvutitest kuni väikese võimsusega mobiiltelefonideni. Testige põhjalikult erinevates seadmetes ja ekraanisuurustes.
• Juurdepääsetavuse standardid: Järgige rahvusvahelisi juurdepääsetavuse standardeid, nagu WCAG (veebisisu juurdepääsetavuse juhised), et tagada kaasavus puuetega kasutajatele.
• Kasutaja ootused: Kuigi sujuv kerimine on üldiselt hästi vastu võetud, olge teadlik võimalikest kultuurilistest erinevustest kasutajate ootustes animatsiooni ja liikumise suhtes. Tagasiside kogumiseks testige erinevate kasutajarühmadega.

Järeldus

scroll-behavior: smooth; on väärtuslik CSS-i omadus, mis võib oluliselt parandada teie veebisaidi kasutajakogemust. Mõistes selle põhirakendust, kohandamisvalikuid, juurdepääsetavuse kaalutlusi ja brauseri ühilduvust, saate luua kasutajatele kogu maailmas sujuva ja nauditava sirvimiskogemuse. Pidage meeles, et seate prioriteediks juurdepääsetavuse, optimeerite jõudlust ja testite põhjalikult, et tagada, et teie sujuva kerimise juurutamine vastab kõigi teie kasutajate vajadustele. Järgides selles juhendis toodud juhiseid ja parimaid tavasid, saate omandada sujuva kerimise ja luua veebisaidi, mis on nii visuaalselt atraktiivne kui ka kasutajasõbralik ülemaailmsele publikule.