M

MLOG

Lietuvių

Įvaldykite CSS scroll-behavior sklandžiai ir prieinamai navigacijai. Sužinokite įgyvendinimo metodus, naršyklių suderinamumą ir pažangias pritaikymo parinktis.

CSS slinkties elgesys: Išsamus sklandaus slinkimo vadovas

Šiuolaikinio tinklalapių kūrimo kraštovaizdyje vartotojo patirtis (UX) yra svarbiausia. Viena, iš pažiūros maža detalė, kuri gali smarkiai paveikti UX, yra slinkimo sklandumas. Nebėra staigių šuolių tarp sekcijų! CSS scroll-behavior savybė siūlo paprastą, bet galingą būdą sklandžiam slinkimui įgyvendinti, pagerinant svetainės prieinamumą ir bendrą vartotojų pasitenkinimą. Šis vadovas pateikia išsamų scroll-behavior tyrimą, apimantį viską – nuo pagrindinio įgyvendinimo iki pažangaus pritaikymo ir naršyklių suderinamumo, kad būtų pasiekiama tikrai pasaulinė auditorija.

Kas yra CSS slinkties elgesys?

CSS scroll-behavior savybė leidžia nurodyti slinkimo elgesį slinkties laukeliui. Pagal numatytuosius nustatymus slinkimas yra momentinis, dėl to atsiranda staigūs šuoliai naršant tarp skirtingų puslapio dalių. scroll-behavior: smooth; tai pakeičia, suteikdama sklandų, animuotą perėjimą, kai suaktyvinamas slinkimas, nesvarbu, ar spustelėjus švartavimo nuorodą, naudojant rodyklių klavišus, ar programiškai inicijavus slinkimą.

Pagrindinis scroll-behavior: smooth; įgyvendinimas

Paprastas būdas įjungti sklandų slinkimą yra pritaikyti scroll-behavior: smooth; savybę html arba body elementui. Tai padaro sklandų visą slinkimą peržiūros lange.

Taikymas html elementui:

Paprastai tai yra pageidaujamas metodas, nes jis veikia visą puslapio slinkimo elgesį.

html {
  scroll-behavior: smooth;
}

Taikymas body elementui:

Šis metodas taip pat veikia, bet yra mažiau paplitęs, nes jis veikia tik turinį body viduje.

body {
  scroll-behavior: smooth;
}

Pavyzdys: Įsivaizduokite paprastą tinklalapį su keliomis sekcijomis, identifikuotomis antraštėmis. Kai vartotojas spusteli navigacijos nuorodą, nukreiptą į vieną iš šių sekcijų, užuot iš karto peršokęs į tą sekciją, puslapis sklandžiai į ją perslinks.

Sklandus slinkimas su švartavimo nuorodomis

Švartavimo nuorodos (arba fragmento identifikatoriai) yra įprastas būdas naršyti tinklalapyje. Jos paprastai naudojamos turinio lentelėse arba vieno puslapio svetainėse. Naudojant scroll-behavior: smooth;, spustelėjus švartavimo nuorodą, suaktyvinama sklandaus slinkimo animacija.

HTML struktūra, skirta švartavimo nuorodoms:





  
1 skyrius

  
1 skyriaus turinys...






  
2 skyrius

  
2 skyriaus turinys...






  
3 skyrius

  
3 skyriaus turinys...

Su CSS taisykle html { scroll-behavior: smooth; } spustelėjus bet kurią nuorodą navigacijoje, bus pasiektas sklandus slinkimo animacija į atitinkamą skyrių.

Tikslinių konkrečių slinkties elementų pasirinkimas

Taip pat galite pritaikyti scroll-behavior: smooth; konkretiems slinkties elementams, pvz., div su overflow: auto; arba overflow: scroll;. Tai leidžia įjungti sklandų slinkimą konkrečiame konteineryje, nepaveikiant likusios puslapio dalies.

Pavyzdys: sklandus slinkimas div:


  
Daug turinio čia...

  
Daugiau turinio...

  
Dar daugiau turinio...




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

Šiame pavyzdyje tik turinys .scrollable-container viduje sklandžiai slinks.

Programinis sklandus slinkimas su JavaScript

Nors scroll-behavior: smooth; tvarko slinkimą, kurį sukelia vartotojo sąveika (pvz., spustelėjus švartavimo nuorodas), gali prireikti inicijuoti slinkimą programiškai naudojant JavaScript. scrollTo() ir scrollBy() metodai kartu su behavior: 'smooth' parinktimi suteikia galimybę tai pasiekti.

Naudojant scrollTo():

scrollTo() metodas perkelia langą į konkrečią koordinatę.

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

Šis kodas sklandžiai perves langą į 500 pikselių vertikalų poslinkį nuo viršaus.

Naudojant scrollBy():

scrollBy() metodas perkelia langą nurodytu kiekiu.

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

Šis kodas sklandžiai perves langą žemyn 100 pikselių.

Pavyzdys: sklandus slinkimas į elementą spustelėjus mygtuką:





  
3 skyrius

  
3 skyriaus turinys...




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

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

Spustelėjus mygtuką, puslapis sklandžiai perslinks į elementą „3 skyrius“, naudojant scrollIntoView(). Šis metodas dažnai yra pageidaujamas, nes apskaičiuoja tikslią tikslinio elemento padėtį, nepaisant dinamiškų turinio pakeitimų.

Slinkimo greičio ir palengvinimo pritaikymas

Nors scroll-behavior: smooth; suteikia numatytąją sklandaus slinkimo animaciją, negalite tiesiogiai valdyti greičio ar palengvinimo (animacijos greičio pokyčio laikui bėgant) naudodami tik CSS. Pritaikymui reikia JavaScript.

Svarbi pastaba: Pernelyg ilgos arba sudėtingos animacijos gali būti žalingos UX, galimai sukelti judesio ligą arba trukdyti vartotojo sąveikai. Siekti subtilių ir efektyvių animacijų.

JavaScript pagrindu sukurtas pritaikymas:

Norėdami pritaikyti slinkties greitį ir palengvinimą, turite naudoti JavaScript, kad sukurtumėte pasirinktinę animaciją. Paprastai tai apima bibliotekų, pvz., GSAP (GreenSock Animation Platform), naudojimą arba savo animacijos logikos įgyvendinimą naudojant requestAnimationFrame.

Pavyzdys naudojant requestAnimationFrame:

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);
    }
  }

  // Palengvinimo funkcija (pvz., 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);
}

// Pavyzdys:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milisekundės
smoothScroll(targetElement, scrollDuration);

Šis kodas apibrėžia smoothScroll funkciją, kuri gauna tikslinį elementą ir trukmę. Ji naudoja requestAnimationFrame, kad sukurtų sklandžią animaciją, ir apima palengvinimo funkciją (šiame pavyzdyje easeInOutQuad), kad būtų galima valdyti animacijos tempą. Galite rasti daug skirtingų palengvinimo funkcijų internete, kad pasiektumėte įvairių animacijos efektų.

Prieinamumo svarstymai

Nors sklandus slinkimas gali pagerinti UX, būtina atsižvelgti į prieinamumą. Kai kuriems vartotojams sklandus slinkimas gali būti blaškantis ar net orientaciją prarandantis. Būtina suteikti galimybę išjungti sklandų slinkimą.

Vartotojo nuostatos įgyvendinimas:

Geriausias būdas yra atsižvelgti į vartotojo operacinės sistemos pageidavimus dėl sumažinto judesio. Medijos užklausos, pvz., prefers-reduced-motion, leidžia aptikti, ar vartotojas savo sistemos nustatymuose paprašė sumažinti judėjimą.

Naudojant prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* Perrašyti sklandų slinkimą */
  }
}

Šis kodas išjungia sklandų slinkimą, jei vartotojas įjungė nustatymą „mažinti judesį“ savo operacinėje sistemoje. !important vėliava naudojama siekiant užtikrinti, kad ši taisyklė perrašytų bet kokias kitas scroll-behavior deklaracijas.

Rankinio perjungimo pateikimas:

Taip pat galite pateikti rankinį perjungimą (pvz., žymimąjį laukelį), kuris leidžia vartotojams įjungti arba išjungti sklandų slinkimą. Tai suteikia vartotojams daugiau tiesioginio valdymo savo patirčiai.



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

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

Šis kodas prideda žymimąjį laukelį, kuris leidžia vartotojams įjungti arba išjungti sklandų slinkimą. Nepamirškite išsaugoti šios vartotojo nuostatos (pvz., naudodami vietinę saugyklą), kad ji būtų įsiminta tarp sesijų.

Naršyklės suderinamumas

scroll-behavior turi gerą naršyklės palaikymą, tačiau būtina žinoti senesnes naršykles, kurios jo gali nepalaikyti. Čia pateikiama naršyklių suderinamumo santrauka:

Senesnių naršyklių atsarginė parinktis:

Naršyklėms, kurios nepalaiko scroll-behavior, galite naudoti JavaScript polyfill. Polyfill yra kodo dalis, kuri suteikia naujesnės funkcijos funkcionalumą senesnėse naršyklėse.

Pavyzdys: Polyfill naudojimas:

Yra keletas JavaScript bibliotekų, kurios teikia sklandaus slinkimo polyfills. Viena iš galimybių yra naudoti tokią biblioteką kaip „smoothscroll-polyfill“.

Šis kodas apima biblioteką „smoothscroll-polyfill“ ir ją inicijuoja. Tai suteiks sklandaus slinkimo funkcionalumą senesnėse naršyklėse, kurios natūraliai nepalaiko scroll-behavior.

Sąlyginis įkėlimas: Apsvarstykite galimybę sąlygiškai įkelti polyfill naudojant scenarijų įkėlėją arba funkcijos aptikimą, kad išvengtumėte nereikalingų režimo sąnaudų šiuolaikinėse naršyklėse.

Geriausia sklandaus slinkimo praktika

Štai keletas geriausių praktikų, kurių reikia nepamiršti įgyvendinant sklandų slinkimą:

Dažniausios problemos ir sprendimai

Štai kelios dažniausios problemos, su kuriomis galite susidurti įgyvendindami sklandų slinkimą, ir jų sprendimai:

Pažangios technikos ir svarstymai

Be pagrindų, yra keletas pažangių metodų ir svarstymų, kaip patobulinti jūsų sklandaus slinkimo įgyvendinimą.

Naudojant scroll-margin ir scroll-padding:

Šios CSS savybės suteikia smulkesnį valdymą slinkimo užfiksavimo elgesiui ir padeda išvengti turinio, kurį užtemdo fiksuotos antraštės ar poraštės.

Pavyzdys:

section {
  scroll-margin-top: 20px; /* Prideda 20 px paraštę virš kiekvienos sekcijos, kai slinkimas */
}

html {
  scroll-padding-top: 60px; /* Prideda 60px pagalvėlę viršuje peržiūros lange, kai slinkimas */
}

Derinimas su sankirtos stebėtojo API:

Sankirtos stebėtojo API leidžia aptikti, kada elementas patenka arba išeina iš peržiūros lango. Galite naudoti šį API norėdami suaktyvinti sklandaus slinkimo animacijas pagal elementų matomumą.

Pavyzdys:

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

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Daryti ką nors, kai skyrius matomas
      console.log('Skyrius ' + entry.target.id + ' yra matomas');
    } else {
      // Daryti ką nors, kai skyrius yra nematomas
      console.log('Skyrius ' + entry.target.id + ' yra nematomas');
    }
  });
}, {
  threshold: 0.5 // Suaktyvinti, kai matoma 50% elemento
});

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

Šis kodas naudoja sankirtos stebėtojo API, kad aptiktų, kada kiekvienas skyrius patenka arba išeina iš peržiūros lango. Tada galite naudoti šią informaciją, kad suaktyvintumėte pasirinktines sklandaus slinkimo animacijas ar kitus vizualinius efektus.

Pasaulinės perspektyvos apie slinkimo elgesį

Nors techninis sklandaus slinkimo įgyvendinimas išlieka nuoseklus visame pasaulyje, kultūriniai ir kontekstiniai aspektai gali turėti įtakos suvokiamam jo patogumui.

Išvada

scroll-behavior: smooth; yra vertinga CSS ypatybė, kuri gali žymiai pagerinti jūsų svetainės vartotojo patirtį. Suprasdami jos pagrindinį įgyvendinimą, pritaikymo parinktis, prieinamumo svarstymus ir naršyklės suderinamumą, galite sukurti sklandų ir malonų naršymo įspūdį vartotojams visame pasaulyje. Nepamirškite teikti pirmenybės prieinamumui, optimizuoti našumą ir kruopščiai išbandyti, kad įsitikintumėte, jog jūsų sklandaus slinkimo įgyvendinimas atitinka visų vartotojų poreikius. Vadovaudamiesi šiame vadove pateiktomis gairėmis ir geriausia praktika, galite įvaldyti sklandų slinkimą ir sukurti svetainę, kuri būtų ir vizualiai patraukli, ir patogi vartotojui pasaulinei auditorijai.