CSS Scroll Margin: Navigatsiooni nihke kontrolli valdamine parema kasutajakogemuse nimel

Veebiarenduse valdkonnas on sujuva ja intuitiivse kasutajakogemuse loomine ülimalt oluline. Üks sageli tähelepanuta jäetud aspekt on lehesiseste navigeerimislinkide laitmatu toimimise tagamine, eriti kui tegemist on fikseeritud päiste või muude kattuvate elementidega. Siin tulevadki mängu CSS-i scroll-margin ja sellega seotud atribuudid. See põhjalik juhend süveneb scroll-margin'i peensustesse, uurides selle kasutust, eeliseid ja parimaid praktikaid sujuvate navigeerimiskogemuste loomiseks.

Probleemi mõistmine: Navigatsiooni takistamine

Kujutage ette veebisaiti, millel on fikseeritud päis. Kui kasutaja klõpsab lingil, mis viitab lehe kindlale jaotisele, kerib brauser sujuvalt selleni. Kui aga fikseeritud päis katab sihtelemendi, jääb selle ülemine osa päise taha peitu, põhjustades frustreeriva kasutajakogemuse. See probleem on eriti levinud ühelehelistes rakendustes (SPA) või veebisaitidel, kus on palju lehesisest navigeerimist.

Mõelge sellisele stsenaariumile blogis: kui klõpsata „Sisukorra“ lingil, võib vastav pealkiri jääda osaliselt navigeerimisriba alla peitu, mis teeb jaotise alguse lugemise keeruliseks. See probleem on levinud paljudel veebisaitidel ja võib negatiivselt mõjutada kasutajate kaasatust.

Tutvustame CSS-i Scroll Margin'it

CSS-i atribuut scroll-margin pakub sellele takistusprobleemile lahenduse. See määratleb nihke elemendi piirjoonest (border box), mida kasutatakse marginaalina elemendi asukoha arvutamisel kerimisakna suhtes kerimisoperatsiooni ajal. Lihtsamalt öeldes loob see elemendi ümber lisaruumi, kui brauser selleni kerib, vältides selle peitumist fikseeritud elementide taha.

Mõelge scroll-margin'ile kui nähtamatule polstrile, mida rakendatakse ainult siis, kui brauser elemendi juurde kerib. See tagab, et element on täielikult nähtav ega ole varjatud ühegi kattuva elemendi poolt.

scroll-margin vs. margin

On oluline eristada scroll-margin'it tavalisest margin atribuudist. Kui margin määratleb ruumi elemendi ümber igas kontekstis, siis scroll-margin mõjutab elemendi asukohta ainult kerimisoperatsioonide ajal. See muudab scroll-margin'i ideaalseks vahendiks navigeerimistakistuste lahendamiseks ilma elemendi paigutust muudes olukordades muutmata.

Süntaks ja kasutus

Atribuuti scroll-margin saab rakendada mis tahes HTML-elemendile ja see aktsepteerib erinevaid väärtusi, sealhulgas:

• Pikkusväärtused: (nt 10px, 2em, 1rem) määravad marginaali suuruse.
• Võtmesõnad: auto seab marginaali brauseri poolt määratud väärtusele.

Samuti saate kasutada lühendatribuute, et määrata kerimismarginaal elemendi konkreetsetele külgedele:

• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left

Lühendatribuut scroll-margin võimaldab teil määrata kõik neli külge korraga, sarnaselt tavalise margin atribuudiga:

            scroll-margin: 10px; /* Kõik küljed */
scroll-margin: 10px 20px; /* Ülal/all, Vasakul/paremal */
scroll-margin: 10px 20px 30px; /* Ülal, Vasakul/paremal, All */
scroll-margin: 10px 20px 30px 40px; /* Ülal, Paremal, All, Vasakul */
            

              
                Copy
              
            
          

Põhinäide

Siin on põhinäide, kuidas kasutada scroll-margin'it, et nihutada elementi fikseeritud päisest:

            .target-element {
  scroll-margin-top: 60px; /* Kohanda vastavalt päise kõrgusele */
}
            

              
                Copy
              
            
          

Selles näites rakendame sihtelemendile scroll-margin-top väärtusega 60px. See tagab, et kui brauser selle elemendini kerib, paigutatakse see 60 pikslit allapoole vaateakna ülaosast, vältides selle peitumist sama kõrgusega fikseeritud päise taha.

CSS Scroll Padding

scroll-margin'it täiendab scroll-padding. Kui scroll-margin lisab ruumi väljapoole elementi, siis scroll-padding lisab ruumi sisse kerimiskonteinerisse. Mõlemad atribuudid lahendavad sama põhiprobleemi – sisu varjamise –, kuid teevad seda erinevate nurkade alt.

scroll-padding määratleb kerimisaknast sissepoole jäävad vahed, mida kasutatakse kerimisakna virtuaalseks kahandamiseks sihtmärgi optimaalse vaateala arvutamisel. See takistab sisu varjamist tööriistaribade, fikseeritud päiste või muude kasutajaliidese elementide poolt, mis katavad osi kerimisaknast.

Süntaks ja kasutus

Sarnaselt scroll-margin'ile aktsepteerib scroll-padding pikkusväärtusi ja võtmesõnu. Sellel on ka lühendatribuudid üksikute külgede jaoks:

• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left

Ja lühendatribuut:

            scroll-padding: 10px; /* Kõik küljed */
scroll-padding: 10px 20px; /* Ülal/all, Vasakul/paremal */
scroll-padding: 10px 20px 30px; /* Ülal, Vasakul/paremal, All */
scroll-padding: 10px 20px 30px 40px; /* Ülal, Paremal, All, Vasakul */
            

              
                Copy
              
            
          

Põhinäide

Siin on praktiline näide scroll-padding'i kasutamisest:

            :root {
  scroll-padding-top: 60px; /* Kohanda vastavalt päise kõrgusele */
}
            

              
                Copy
              
            
          

Sel juhul rakendame scroll-padding-top'i juurelemendile (:root), mis on samaväärne html elemendiga. See lisab efektiivselt polstri kerimisakna ülaossa, vältides sisu peitumist fikseeritud päise taha. Selle rakendamine juurelemendile on sageli mugav viis kogu saidi hõlmavate nihete haldamiseks.

scroll-margin'i ja scroll-padding'i vahel valimine

Otsus, kas kasutada scroll-margin'it või scroll-padding'it, sõltub konkreetsest kontekstist ja soovitud tulemusest. Siin on üldine juhis:

• Kasutage scroll-margin'it, kui: Soovite lisada ruumi ümber sihtelemendi, et tagada selle täielik nähtavus. Seda kasutatakse tavaliselt siis, kui sihtelement ise on varjatud.
• Kasutage scroll-padding'it, kui: Soovite kahandada kerimisakent, et vältida sisu varjamist. Seda kasutatakse tavaliselt siis, kui fikseeritud elemendid katavad osi kerimisaknast.

Paljudel juhtudel võite soovitud efekti saavutamiseks vajada isegi mõlema atribuudi kooskasutamist. Näiteks võite kasutada scroll-padding-top'i fikseeritud päise arvesse võtmiseks ja scroll-margin-bottom'i, et tagada piisav vahe sihtelemendi all.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid ja kasutusjuhtumeid, et illustreerida scroll-margin'i ja scroll-padding'i võimekust.

1. Fikseeritud päisega navigeerimine

See on kõige levinum kasutusjuhtum. Nagu juba arutasime, võivad fikseeritud päised takistada lehesisest navigeerimist. Selle lahendamiseks rakendage sihtelementidele scroll-margin-top või juurelemendile scroll-padding-top, kohandades väärtust vastavalt päise kõrgusele.

Näide:

            /* CSS */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  z-index: 10;
}

:root {
  scroll-padding-top: 60px;
}

/* Või */

.target-section {
  scroll-margin-top: 60px;
}
            

              
                Copy
              
            
          

            <!-- HTML -->
<header>...</header>
<section id="section1" class="target-section">...</section>
<section id="section2" class="target-section">...</section>
            

              
                Copy
              
            
          

2. Vestlusrakendused fikseeritud sisestusväljadega

Vestlusrakendustes, mille allosas on fikseeritud sisestusväljad, võivad uued sõnumid jääda osaliselt sisestusvälja taha peitu. Kasutage vestluse konteineril scroll-padding-bottom'i, et tagada viimaste sõnumite alati täielik nähtavus.

Näide:

            /* CSS */
.chat-container {
  height: 400px;
  overflow-y: scroll;
  scroll-padding-bottom: 80px; /* Sisestusvälja kõrgus */
}

.input-field {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
}
            

              
                Copy
              
            
          

3. Akordionid ja kokkupandavad jaotised

Akordionite või kokkupandavate jaotiste kasutamisel võib laiendatud sisu jääda fikseeritud päise varju. Rakendage akordioni sisule scroll-margin-top, et tagada selle täielik nähtavus laiendamisel.

Näide:

            /* CSS */
.accordion-content {
  scroll-margin-top: 60px; /* Kohanda vastavalt päise kõrgusele */
}

/* JavaScript (lihtsustatud) */
const accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(button => {
  button.addEventListener('click', () => {
    const content = button.nextElementSibling;
    content.classList.toggle('active'); // Lülita nähtavust
  });
});
            

              
                Copy
              
            
          

4. Galerii fikseeritud navigeerimisega

Kujutage ette pildigaleriid, kus ülaosas on fikseeritud navigeerimisriba, mis võimaldab pilte filtreerida. Filtril klõpsates peaksid vastavad pildid vaatesse kerima. Kasutage scroll-margin-top'i, et tagada filtreeritud piltide peitumine navigeerimisriba taha lehe kerimisel.

Näide:

            /* CSS */
#gallery-navigation {
  position: fixed;
  top: 0;
  width: 100%;
  background: #eee;
}

.gallery-item {
  scroll-margin-top: 50px; /* Kohanda vastavalt navigeerimisriba kõrgusele */
}

            

              
                Copy
              
            
          

Parimad praktikad ja kaalutlused

scroll-margin'i ja scroll-padding'i tõhusaks kasutamiseks pidage meeles järgmisi parimaid praktikaid:

• Kasutage sobivaid ühikuid: Valige oma disainile sobivad ühikud (nt px, em, rem) ja tagage järjepidevus erinevates seadmetes. rem ühikud on sageli hea valik suhtelise suuruse säilitamiseks, mis põhineb juurelemendi fondi suurusel.
• Arvestage reageerivusega: Fikseeritud päise kõrgused võivad erinevatel ekraanisuurustel varieeruda. Kasutage meediapäringuid, et vastavalt kohandada scroll-margin'i ja scroll-padding'i väärtusi, et tagada ühtlane kogemus kõigis seadmetes.
• Testige põhjalikult: Testige oma lahendust erinevates brauserites ja seadmetes, et tuvastada ja lahendada ühilduvusprobleeme.
• Ligipääsetavus: Veenduge, et scroll-margin'i ja scroll-padding'i kasutamine ei mõjutaks negatiivselt ligipääsetavust. Kontrollige, et kasutajad saaksid hõlpsasti navigeerida ja teie sisuga suhelda abistavate tehnoloogiate abil.
• Dünaamiline sisu: Kui teie fikseeritud elementide kõrgus muutub dünaamiliselt (nt kasutaja interaktsioonide või sisu uuenduste tõttu), peate võib-olla kasutama JavaScripti, et dünaamiliselt kohandada scroll-margin'i või scroll-padding'i väärtusi. Kaaluge ResizeObserveri kasutamist, et tuvastada fikseeritud elementide kõrguse muutusi ja vastavalt uuendada kerimisnihet.

Täpsemad tehnikad

CSS-muutujate kasutamine dünaamilisteks kohandusteks

Keerukamate stsenaariumide jaoks saate kasutada CSS-muutujaid, et dünaamiliselt kohandada scroll-margin'i ja scroll-padding'i väärtusi vastavalt fikseeritud elementide kõrgusele. See võimaldab teil nihkeid hõlpsasti uuendada, ilma et peaksite CSS-i otse muutma.

Näide:

            /* CSS */
:root {
  --header-height: 60px;
  scroll-padding-top: var(--header-height);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
}

/* JavaScript (kui päise kõrgus muutub dünaamiliselt) */
const header = document.querySelector('header');
const updateHeaderHeight = () => {
  const height = header.offsetHeight;
  document.documentElement.style.setProperty('--header-height', `${height}px`);
};

window.addEventListener('resize', updateHeaderHeight);
updateHeaderHeight(); // Esmane uuendus

            

              
                Copy
              
            
          

Kombineerimine sujuva kerimisega

Kasutajakogemuse edasiseks parandamiseks kombineerige scroll-margin'it ja scroll-padding'it sujuva kerimisega. See loob visuaalselt meeldiva ja sujuva navigeerimiskogemuse.

Näide:

            /* CSS */
html {
  scroll-behavior: smooth;
}

a[href^="#"] {
    /* See tagab fookuse keritud elemendil isegi ilma klikita */
    outline: none;
}

:focus {
    outline: 2px solid blue;
}

            

              
                Copy
              
            
          

Ligipääsetavuse kaalutlused

Visuaalse kasutajakogemuse parandamisel on oluline tagada ligipääsetavus. Peamine fookus on tagada, et kasutajaliidese fookus jääks elemendile, kuhu keriti, võimaldades klaviatuurikasutajatel, ekraanilugejatel ja muudel abistavatel tehnoloogiatel korrektselt toimida.

Fookuse tagamine

scroll-margin'i ja scroll-padding'i kasutamine iseenesest *ei tohiks* ligipääsetavust rikkuda. Siiski veenduge, et elemendid, kuhu keritakse, on vaikimisi fokuseeritavad või muudetud fokuseeritavaks, lisades elemendile tabindex="-1". See võimaldab klaviatuurikasutajatel keritud elemendile navigeerida.

Testimine ekraanilugejatega

Testige oma veebisaiti alati ekraanilugejatega (nagu NVDA, VoiceOver või JAWS), et tagada sisu korrektne ettelugemine ning et kasutajad saaksid hõlpsasti navigeerida ja mõista elemente, kuhu keritakse. Veenduge, et ekraanilugeja teatab õige pealkirja või sisu, kui keritakse kindlasse jaotisesse.

Brauseri ühilduvus

scroll-margin ja scroll-padding on laialdaselt toetatud kaasaegsete brauserite poolt, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea tava kontrollida uusimat brauseri ühilduvuse teavet ressurssidest nagu Can I use..., et tagada teie lahenduse ootuspärane toimimine erinevates brauserites ja versioonides. Kui peate toetama vanemaid brausereid, kaaluge polüfiilide või alternatiivsete lahenduste kasutamist.

Kokkuvõte

CSS-i scroll-margin ja scroll-padding on võimsad tööriistad sujuvate ja intuitiivsete navigeerimiskogemuste loomiseks. Mõistes nende kasutust, eeliseid ja parimaid praktikaid, saate tõhusalt lahendada navigeerimistakistuste probleeme ning parandada oma veebisaitide ja rakenduste üldist kasutatavust. Pidage meeles arvestada reageerivuse, ligipääsetavuse ja brauseri ühilduvusega nende atribuutide rakendamisel ning testige oma lahendust alati põhjalikult, et tagada kõigile ühtlane ja meeldiv kasutajakogemus.

Nende tehnikate valdamisega olete hästi varustatud, et luua veebisaite, mis ei ole mitte ainult visuaalselt atraktiivsed, vaid ka väga funktsionaalsed ja ligipääsetavad, pakkudes suurepärast kasutajakogemust külastajatele üle kogu maailma. Võtke need tööriistad omaks, katsetage erinevaid lähenemisviise ja viige oma veebiarenduse oskused uuele tasemele.

Lisamaterjalid

• MDN Web Docs: scroll-margin
• MDN Web Docs: scroll-padding
• Can I use...