Eesti

Omanda CSS-i scroll-behavior sujuvaks ja ligipääsetavaks navigeerimiseks. Õpi rakendustehnikaid, brauseri ühilduvust ja kohandamisvalikuid sujuvaks kasutuskogemuseks.

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:



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.


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:

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:

Levinud probleemid ja lahendused

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

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.

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.

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.