CSS-i kerimiskäitumised: sujuva kerimise ja kerimispunktide meisterlik valdamine

Tänapäeva dünaamilisel veebimaastikul on kasutajakogemus (UX) esmatähtis. Peened, kuid mõjusad funktsioonid, nagu sujuv kerimine ja kerimispunktid, võivad kasutajate kaasatust ja rahulolu märkimisväärselt suurendada. CSS pakub võimsaid tööriistu nende funktsioonide rakendamiseks, andes arendajatele suurema kontrolli kerimiskogemuse üle. See juhend süveneb scroll-behavior ja scroll-snap omaduste keerukustesse, pakkudes praktilisi näiteid ja parimaid praktikaid intuitiivsete ja visuaalselt meeldivate veebiliideste loomiseks.

Kerimiskäitumise olulisuse mõistmine

Kerimine on veebis fundamentaalne interaktsioon. See, kuidas leht kerib, võib oluliselt mõjutada kasutaja arusaama saidi reageerimisvõimest ja üldisest kvaliteedist. Järsk ja katkendlik kerimine võib olla segadusttekitav, samas kui sujuv ja kontrollitud kerimine pakub meeldivamat ja professionaalsemat kogemust.

Ajalooliselt nõudis sujuva kerimise saavutamine JavaScripti teeke. Nüüd pakub CSS aga natiivset lahendust scroll-behavior omadusega, mis lihtsustab protsessi ja parandab jõudlust.

Sujuva kerimise rakendamine CSS-iga

Omadus scroll-behavior võimaldab teil määrata, kas kerimine peaks toimuma sujuvalt animeerituna või hetkega. See aktsepteerib kahte väärtust:

• auto: (Vaikimisi) Kerimine toimub koheselt.
• smooth: Kerimine animeeritakse sujuvalt teatud aja jooksul.

Kogu lehe sujuva kerimise lubamiseks rakendage scroll-behavior omadus html või body elemendile:

            html {
 scroll-behavior: smooth;
}
            

              
                Copy
              
            
          

See lihtne CSS-deklaratsioon lubab automaatselt sujuva kerimise kõigi ankurlinkide ja brauseripõhiste kerimistoimingute jaoks lehel.

Sujuva kerimise sihtimine konkreetsetele elementidele

Saate rakendada scroll-behavior ka konkreetsetele keritavatele elementidele, nagu konteinerid, millel on overflow: scroll või overflow: auto. See võimaldab teil luua sujuvaid kerimisefekte oma veebisaidi teatud osades, mõjutamata globaalset kerimiskäitumist.

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

              
                Copy
              
            
          

Ligipääsetavuse kaalutlused

Kuigi sujuv kerimine parandab paljude kasutajakogemust, on oluline arvestada ligipääsetavusega. Mõned kasutajad, eriti need, kellel on vestibulaarsed häired või liikumistundlikkus, võivad pidada sujuvat kerimist segadusttekitavaks või isegi iiveldust tekitavaks. On oluline pakkuda kasutajatele võimalus sujuv kerimine vajadusel välja lülitada.

Üks lähenemisviis on kasutada JavaScripti, et tuvastada kasutaja eelistus vähendatud liikumise osas (kasutades prefers-reduced-motion meediapäringut) ja vastavalt sellele sujuv kerimine keelata:

            @media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto !important;
 }
}
            

              
                Copy
              
            
          

Lipp !important tagab, et scroll-behavior: auto stiil alistab vaikimisi scroll-behavior: smooth stiili, kui kasutaja eelistab vähendatud liikumist.

Sissejuhatus CSS-i kerimispunktidesse (Scroll Snap)

Kerimispunktid (Scroll Snap) on võimas CSS-i funktsioon, mis võimaldab teil kontrollida, kuidas sisu pärast kerimistoimingut oma kohale fikseerub. See on eriti kasulik karussellide, pildigaleriide ja eraldiseisvate jaotistega üheleheküljeliste veebisaitide loomisel. Kerimispunktid tagavad, et iga element või jaotis joondub ideaalselt vaateaknaga, pakkudes puhast ja prognoositavat kasutajakogemust.

Kerimispunktide peamised omadused

Funktsionaalsus scroll-snap tugineb mõnele peamisele CSS-i omadusele:

• scroll-snap-type: Määrab, kui rangelt kerimispunkte rakendatakse ja milline kerimissuund fikseerimise käivitab.
• scroll-snap-align: Määratleb, kuidas element kerimiskonteineriga fikseerub.
• scroll-snap-stop: Kontrollib, kas kerimistoiming peaks peatuma igal kerimispunktil.

Kerimispunktide konteineri seadistamine

Kõigepealt peate määrama konteineri elemendi kerimispunktide konteineriks. See on element, mis kontrollib oma tütarelementide fikseerimiskäitumist. Selleks rakendage konteinerile omadust scroll-snap-type. Omadus scroll-snap-type võtab kaks väärtust:

• x või y: Määrab kerimissuuna (horisontaalne või vertikaalne).
• mandatory või proximity: Määrab, kui rangelt kerimispunkte rakendatakse. mandatory sunnib kerimise peatuma igal kerimispunktil, samas kui proximity fikseerub lähimale kerimispunktile, kui kerimistoiming lõpeb.

Näiteks horisontaalse kerimispunktide konteineri loomiseks kohustusliku fikseerimisega kasutaksite järgmist CSS-i:

            .scroll-snap-container {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
}
            

              
                Copy
              
            
          

Selles näites kasutatakse display: flex tütarelementide horisontaalseks paigutamiseks. overflow-x: auto lubab horisontaalset kerimist, kui sisu ületab konteineri laiuse. Oluline osa on scroll-snap-type: x mandatory, mis aktiveerib horisontaalse kerimisfikseerimise kohustusliku joondamisega.

Kerimispunktide määratlemine tütarelementidel

Järgmisena peate määratlema kerimispunktid kerimispunktide konteineri tütarelementidel. Seda tehakse omadusega scroll-snap-align. Omadus scroll-snap-align määrab, kuidas element joondub kerimiskonteineriga pärast kerimistoimingut. See võtab kaks väärtust (vastavalt horisontaalseks ja vertikaalseks joondamiseks), mis võivad olla üks järgmistest:

• start: Joondab elemendi algusserva kerimiskonteineri algusservaga.
• center: Joondab elemendi keskpunkti kerimiskonteineri keskpunktiga.
• end: Joondab elemendi lõpuserva kerimiskonteineri lõpuservaga.
• none: Element ei fikseeru ühelegi positsioonile.

Näiteks iga tütarelemendi algusserva joondamiseks kerimiskonteineri algusservaga kasutaksite järgmist CSS-i:

            .scroll-snap-container > * {
 scroll-snap-align: start;
}
            

              
                Copy
              
            
          

See CSS-reegel rakendab omaduse scroll-snap-align: start kõigile elemendi .scroll-snap-container otsestele tütarelementidele. Kui kasutaja kerib horisontaalselt, fikseerub iga tütarelement oma kohale, joondades oma algusserva konteineri algusservaga.

Kerimispeatuse käitumise kontrollimine

Omadus scroll-snap-stop kontrollib, kas kerimistoiming peaks peatuma igal kerimispunktil. See aktsepteerib kahte väärtust:

• normal: (Vaikimisi) Kerimistoiming võib peatuda igal kerimispunktil või mitte, sõltuvalt kerimiskiirusest ja hoost.
• always: Kerimistoiming peatub alati igal kerimispunktil.

Tagamaks, et kerimistoiming peatub alati igal kerimispunktil, saate kasutada järgmist CSS-i:

            .scroll-snap-container > * {
 scroll-snap-align: start;
 scroll-snap-stop: always;
}
            

              
                Copy
              
            
          

See tagab väga tahtliku fikseerimiskäitumise, mis on ideaalne kontrollitud karussellilaadsete kogemuste jaoks.

Kerimispunktide praktilised näited

Pildigalerii horisontaalsete kerimispunktidega

Loome lihtsa pildigalerii horisontaalsete kerimispunktidega. Meil on konteiner, mis hoiab endas pilte, ja iga pilt fikseerub oma kohale, kui kasutaja horisontaalselt kerib.

HTML:

            <div class="image-gallery">
 <img src="image1.jpg" alt="Pilt 1">
 <img src="image2.jpg" alt="Pilt 2">
 <img src="image3.jpg" alt="Pilt 3">
 <img src="image4.jpg" alt="Pilt 4">
</div>
            

              
                Copy
              
            
          

CSS:

            .image-gallery {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 width: 100%;
 height: 300px; /* Kohandage vastavalt vajadusele */
}

.image-gallery img {
 width: 100%; /* Iga pilt võtab täislaiuse */
 height: 100%;
 object-fit: cover; /* Säilitage kuvasuhe */
 scroll-snap-align: start;
 flex-shrink: 0; /* Vältige piltide kokkutõmbumist */
}

/* Valikuline: lisage piltide vahele veidi ruumi */
.image-gallery img:not(:last-child) {
 margin-right: 10px;
}
            

              
                Copy
              
            
          

Selles näites on .image-gallery konteiner seadistatud horisontaalse kerimispunktide konteinerina. Iga pilt konteineris fikseerub konteineri algusserva külge. Omadus flex-shrink: 0 takistab piltide kokkutõmbumist, tagades, et nad säilitavad oma ettenähtud laiuse.

Üheleheküljeline veebisait vertikaalsete kerimispunktidega

Kerimispunktid on ideaalsed ka üheleheküljeliste veebisaitide loomiseks, kus iga jaotis fikseerub vaatesse, kui kasutaja vertikaalselt kerib. See pakub puhast ja organiseeritud navigeerimiskogemust.

HTML:

            <div class="scroll-container">
 <section id="section1">
 <h2>Jaotis 1</h2>
 <p>Jaotise 1 sisu</p>
 </section>
 <section id="section2">
 <h2>Jaotis 2</h2>
 <p>Jaotise 2 sisu</p>
 </section>
 <section id="section3">
 <h2>Jaotis 3</h2>
 <p>Jaotise 3 sisu</p>
 </section>
</div>
            

              
                Copy
              
            
          

CSS:

            .scroll-container {
 height: 100vh; /* Hõivab kogu vaateakna kõrguse */
 overflow-y: auto;
 scroll-snap-type: y mandatory;
}

.scroll-container section {
 height: 100vh; /* Iga jaotis hõivab kogu vaateakna kõrguse */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 scroll-snap-align: start;
}

/* Valikuline: lisage jaotistele veidi stiili */
.scroll-container section:nth-child(odd) {
 background-color: #f0f0f0;
}

.scroll-container section:nth-child(even) {
 background-color: #e0e0e0;
}
            

              
                Copy
              
            
          

Selles näites on .scroll-container seadistatud hõivama kogu vaateakna kõrguse (100vh) ja see lubab vertikaalse kerimisfikseerimise kohustusliku joondamisega. Iga <section> element hõivab samuti kogu vaateakna kõrguse ja fikseerub konteineri algusserva külge. See loob sujuva, jaotiste kaupa kerimise kogemuse.

Täpsemad kerimispunktide tehnikad

Scroll Paddingu kasutamine täpseks joondamiseks

Mõnel juhul võib teil olla vaja kohandada kerimispunkte, et arvestada fikseeritud päiste või muude elementidega, mis katavad kerimiskonteinerit. Omadust scroll-padding saab kasutada kerimiskonteinerile polsterduse lisamiseks, mis nihutab tõhusalt kerimispunkte.

            .scroll-container {
 scroll-padding-top: 60px; /* Kohandage oma fikseeritud päise kõrgusega */
}
            

              
                Copy
              
            
          

See tagab, et sisu fikseerub oma kohale fikseeritud päise all, mitte ei jää selle varju.

Kerimispunktide kombineerimine sujuva kerimisega

Saate kombineerida scroll-snap omadusega scroll-behavior: smooth, et luua veelgi lihvitum kerimiskogemus. Sisu fikseerub oma kohale sujuva animatsiooniga, pakkudes visuaalselt meeldivat üleminekut.

            html {
 scroll-behavior: smooth;
}

.scroll-container {
 overflow-y: auto;
 scroll-snap-type: y mandatory;
 scroll-padding-top: 60px;
}
            

              
                Copy
              
            
          

Keerukate kerimispunktide paigutuste loomine

Kombineerides erinevaid scroll-snap-align väärtusi ja kasutades CSS Gridi või Flexboxi, saate luua keerukaid kerimispunktide paigutusi mitme kerimispunktiga jaotise kohta. See võimaldab suuremat paindlikkust visuaalselt kaasahaaravate kerimiskogemuste kujundamisel.

Brauserite ühilduvus ja polütäited (Polyfills)

Omadused scroll-behavior ja scroll-snap on laialdaselt toetatud kaasaegsete brauserite poolt. Vanemad brauserid ei pruugi aga neid funktsioone täielikult toetada. Ühilduvuse tagamiseks laiemas brauserite valikus saate kasutada polütäiteid. Polütäide on JavaScripti koodijupp, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites, mis seda natiivselt ei toeta.

scroll-behavior jaoks saate kasutada polütäidet nagu iamdustan/smoothscroll.

scroll-snap jaoks kaaluge teegi või polütäite kasutamist, kui lai tugi vanematele brauseritele on range nõue. Siiski on funktsioon nüüd hästi toetatud ja polütäidete vajadus väheneb.

Ligipääsetavuse parimad praktikad kerimispunktide jaoks

Kuigi kerimispunktid võivad kasutajakogemust parandada, on oluline arvestada ligipääsetavusega, et tagada funktsiooni kasutatavus kõigile.

• Pakkuge alternatiivset navigeerimist: Ärge lootke navigeerimisel ainult kerimispunktidele. Pakkuge alternatiivseid viise sisule juurdepääsemiseks, näiteks traditsiooniline menüü või sisukord.
• Tagage piisav kontrastsus: Veenduge, et iga jaotise teksti ja taustavärvide vahel oleks piisav kontrastsus, et sisu oleks kergesti loetav.
• Kasutage semantilist HTML-i: Kasutage sisu loogiliseks struktureerimiseks semantilisi HTML-elemente nagu <article>, <section> ja <nav>.
• Testige abitehnoloogiatega: Testige oma veebisaiti ekraanilugejate ja muude abitehnoloogiatega, et tagada kerimispunktide funktsionaalsuse ligipääsetavus puuetega kasutajatele.

Kokkuvõte

CSS-i scroll-behavior ja scroll-snap pakuvad võimsaid tööriistu intuitiivsete ja kaasahaaravate kerimiskogemuste loomiseks. Nende omaduste valdamisega saate suurendada kasutajate rahulolu, parandada veebisaidi navigeerimist ja luua visuaalselt meeldivaid liideseid. Pidage meeles, et nende funktsioonide rakendamisel tuleb arvestada ligipääsetavuse ja brauserite ühilduvusega, et teie veebisait oleks kõigile kasutatav. Nende omaduste nüansside mõistmise ja parimate tavade rakendamisega saate oma veebisaidi kasutajakogemust tõsta ja luua oma ülemaailmsele publikule kaasahaaravama ja ligipääsetavama veebikeskkonna.

Edasine uurimine

Et süveneda sügavamale CSS-i kerimiskäitumistesse, kaaluge järgmiste ressursside uurimist:

• MDN Web Docs: scroll-behavior
• MDN Web Docs: scroll-snap-type
• MDN Web Docs: scroll-snap-align