Į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:
- „Chrome“: Palaikoma nuo 61 versijos
- „Firefox“: Palaikoma nuo 36 versijos
- „Safari“: Palaikoma nuo 14.1 versijos (dalinis palaikymas ankstesnėse versijose)
- „Edge“: Palaikoma nuo 79 versijos
- „Opera“: Palaikoma nuo 48 versijos
- „Internet Explorer“: Nepalaikoma
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ą:
- Laikykite tai subtiliai: Venkite per ilgų ar sudėtingų animacijų, kurios gali blaškyti arba sukelti judesio ligą.
- Atsižvelkite į prieinamumą: Suteikite vartotojams galimybę išjungti sklandų slinkimą, jei jie mano, kad jis orientaciją prarandantis. Atsižvelkite į vartotojo nuostatas dėl sumažinto judesio.
- Testuokite skirtinguose įrenginiuose: Įsitikinkite, kad sklandus slinkimas gerai veikia skirtinguose įrenginiuose ir ekrano dydžiuose.
- Optimizuokite našumą: Venkite pernelyg dažnai suaktyvinti sklandaus slinkimo animacijas, nes tai gali turėti įtakos našumui.
- Naudokite prasmingas švartavimo nuorodas: Įsitikinkite, kad švartavimo nuorodos nukreipia į aiškiai apibrėžtas puslapio sekcijas.
- Venkite persidengiančio turinio: Atsižvelkite į fiksuotas antraštes ar kitus elementus, kurie gali persidengti slinkties tikslą. Naudokite CSS ypatybes, pvz.,
scroll-padding-top
arba JavaScript, kad atitinkamai sureguliuotumėte slinkties padėtį.
Dažniausios problemos ir sprendimai
Štai kelios dažniausios problemos, su kuriomis galite susidurti įgyvendindami sklandų slinkimą, ir jų sprendimai:
- Problema: Sklandus slinkimas neveikia.
- Sprendimas: Dar kartą patikrinkite, ar
scroll-behavior: smooth;
pritaikytashtml
arbabody
elementui. Įsitikinkite, kad švartavimo nuorodos teisingai nukreipia į atitinkamas sekcijas. Patikrinkite, ar nėra prieštaraujančių CSS taisyklių, kurios perrašytųscroll-behavior
ypatybę.
- Sprendimas: Dar kartą patikrinkite, ar
- Problema: Sklandus slinkimas yra per lėtas arba per greitas.
- Sprendimas: Pritaikykite slinkimo greitį naudodami JavaScript, kaip aprašyta skyriuje „Slinkimo greičio ir palengvinimo pritaikymas“. Eksperimentuokite su skirtingomis palengvinimo funkcijomis, kad rastumėte tinkamą pusiausvyrą tarp sklandumo ir reakcijos.
- Problema: Fiksuota antraštė persidengia slinkties tikslą.
- Sprendimas: Naudokite
scroll-padding-top
ypatybę CSS, kad įtrauktumėte pagalvėlę į slinkties konteinerio viršų. Arba naudokite JavaScript, kad apskaičiuotumėte fiksuotos antraštės aukštį ir atitinkamai sureguliuotumėte slinkties padėtį.
- Sprendimas: Naudokite
- Problema: Sklandus slinkimas trukdo kitai JavaScript funkcijai.
- Sprendimas: Įsitikinkite, kad jūsų JavaScript kodas nesikerta su sklandaus slinkimo animacija. Naudokite įvykių klausytojus ir atgalinius skambučius, kad koordinuotumėte skirtingų JavaScript funkcijų vykdymą.
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.
scroll-margin
: Apibrėžia paraštę aplink slinkties užfiksavimo sritį.scroll-padding
: Apibrėžia pagalvėlę aplink slinkties užfiksavimo sritį.
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.
- Interneto greitis: Regionuose, kuriuose interneto ryšys yra lėtesnis, didelės JavaScript bibliotekos, skirtos pasirinktinėms animacijoms, gali neigiamai paveikti įkėlimo laiką ir UX. Teikite pirmenybę lengviems sprendimams ir sąlyginiam įkėlimui.
- Įrenginio galimybės: Optimizuokite platų įrenginių asortimentą – nuo aukščiausios klasės stalinių kompiuterių iki mažos galios mobiliųjų telefonų. Išsamiai išbandykite skirtinguose įrenginiuose ir ekrano dydžiuose.
- Prieinamumo standartai: Laikykitės tarptautinių prieinamumo standartų, pvz., WCAG (Web Content Accessibility Guidelines), kad užtikrintumėte įtrauktį vartotojams su negalia.
- Vartotojo lūkesčiai: Nors sklandus slinkimas paprastai yra gerai priimamas, atkreipkite dėmesį į galimus kultūrinius skirtumus vartotojų lūkesčiuose dėl animacijos ir judesio. Išbandykite su įvairiomis vartotojų grupėmis, kad surinktumėte atsiliepimus.
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.