Smooth Scrolling este o tehnică folosită în dezvoltarea web pentru a crea o experiență fluidă de defilare pentru utilizatori. Îmbunătățește navigarea într-o pagină web prin animarea mișcării de defilare în loc de saltul brusc implicit.
Acest ghid cuprinzător pentru dezvoltatorii web vă va ajuta să implementați derularea lină folosind JavaScript.
Derularea lină este atunci când o pagină web derulează fără probleme la secțiunea dorită, în loc să sară acolo instantaneu. Acest lucru face ca experiența de defilare să fie mai plăcută și mai simplă pentru utilizator.
Cuprins
Beneficiile derulării lină
Derularea lină poate îmbunătăți experiența utilizatorului unei pagini web în mai multe moduri:
- Îmbunătățește atractivitatea vizuală eliminând săriturile bruște și șocante de scroll, adăugând o notă de eleganță.
- Încurajează implicarea utilizatorilor oferind o experiență de defilare fluidă și fără întreruperi. Acest lucru, la rândul său, motivează utilizatorii să exploreze conținutul în continuare.
- În cele din urmă, derularea lină facilitează navigarea utilizatorilor, în special atunci când au de-a face cu pagini web lungi sau când se deplasează între diferite secțiuni.
Pentru a implementa derularea lină, puteți modifica comportamentul implicit de defilare folosind JavaScript.
Structura HTML
Mai întâi, creați elementele de marcare necesare pentru diferitele ferestre de vizualizare și navigarea pentru a derula între ele.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
<title>Smooth Scrolling Guide for Web Developers</title>
</head><body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav><section id="section1">
<h2>Section 1</h2>
</section><section id="section2">
<h2>Section 2</h2>
</section><section id="section3">
<h2>Section 3</h2>
</section><script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
</body></html>
Acest HTML constă dintr-o bară de navigare care conține trei etichete de ancorare. Atributul href al fiecărei ancori specifică identificatorul unic al secțiunii țintă (de exemplu, secțiunea 1, secțiunea 2, secțiunea 3). Acest lucru asigură că fiecare link pe care faceți clic navighează la elementul țintă corespunzător.
Stilul CSS
Apoi, aplicați niște CSS pentru a face pagina vizibil atrăgătoare și organizată. Adăugați următoarele la style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
background: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}
nav ul {
display: flex;
gap: 10px;
justify-content: center;
}
nav ul li {
list-style: none;
}
nav ul li a {
border-radius: 5px;
border: 1.5px solid #909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Aceasta va reda legăturile ca un rând de butoane și fiecare secțiune ca un element de înălțime completă. Dar observați cum, făcând clic pe un link, browserul să sară instantaneu la secțiunea corespunzătoare, fără animație.
Implementarea JavaScript
În altă parte, pentru a adăuga o animație lină atunci când faceți clic pe o etichetă de ancorare, utilizați metoda scrollIntoView(). Metoda scrollIntoView() este o metodă JavaScript încorporată a clasei Element care vă permite să defilați un element în zona vizibilă a ferestrei browserului.
Când apelați această metodă, browserul ajustează poziția de defilare a containerului elementului (cum ar fi fereastra sau un container derulabil) pentru a face elementul vizibil.
Adăugați codul JavaScript în fișierul script.js. Începeți prin a asculta evenimentul DOMContentLoaded să se declanșeze înainte de a face orice altceva. Acest lucru asigură apelul invers rulează numai atunci când DOM-ul este complet încărcat și este gata de manipulare.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);
Apoi, definiți funcția makeLinksSmooth(). Începeți prin a selecta etichetele de ancorare în navigare, deoarece veți dori să le modificați comportamentul. Apoi, repetați peste fiecare link și adăugați un ascultător de eveniment pentru evenimentul de clic al acestuia.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a"); navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
În cele din urmă, definiți funcția smoothScroll() care preia un obiect de ascultare a evenimentelor. Apelați preventDefault() pentru a vă asigura că browserul nu efectuează acțiunea implicită atunci când faceți clic pe link. Codul care urmează îl va înlocui.
Luați valoarea href a etichetei de ancorare curente și stocați-o într-o variabilă. Această valoare ar trebui să fie ID-ul secțiunii țintă, cu prefixul „#”, așa că utilizați-o pentru a selecta elementul secțiunii prin querySelector(). Dacă targertElement este prezent, rulați metoda scrollIntoView și transmiteți comportamentul „neted” într-un parametru de obiect pentru a finaliza efectul.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId); if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Cu aceasta, pagina web terminată va derula fără probleme la fiecare secțiune când faceți clic pe un link:
Pentru a îmbunătăți și mai mult experiența de defilare lină, puteți regla anumite aspecte.
Reglarea poziției derulării
Puteți ajusta poziția verticală a scroll-ului folosind proprietatea bloc a argumentului setări. Utilizați valori precum „start”, „center” sau „end” pentru a identifica partea din elementul țintă la care să derulați:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Adăugarea de efecte de uşurare
Aplicați efecte de relaxare la animația de defilare pentru a crea o tranziție mai naturală și mai atractivă din punct de vedere vizual. Funcțiile de ușurare, cum ar fi curbele cubici-bezier personalizate, cum ar fi ease-in, ease-out sau cubic-bezier pot controla accelerația și decelerația mișcării derulării. Puteți utiliza o funcție de sincronizare personalizată cu proprietatea CSS cu comportamentul de defilare sau o bibliotecă JavaScript, cum ar fi „defilare netedă”, pentru a obține același rezultat.
html {
scroll-behavior: smooth;
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Asigurați-vă că implementarea derulării fără probleme funcționează în mod constant în diferite browsere. Testați și gestionați orice neconformități sau neconcordanțe specifice browserului care pot apărea.
Puteți folosi un site web ca Pot folosi pentru a testa compatibilitatea browser-ului la construirea. Luați în considerare utilizarea unei biblioteci JavaScript sau polyfill pentru a asigura compatibilitatea între browsere și pentru a oferi o experiență perfectă pentru toți utilizatorii.
Defilarea lină adaugă o notă de eleganță și îmbunătățește experiența utilizatorului prin crearea unui efect de defilare fluid și plăcut vizual. Urmând pașii prezentați în acest ghid, dezvoltatorii web pot implementa derularea lină folosind JavaScript.
Reglarea fină a comportamentului de defilare, adăugarea de efecte de ușurare și asigurarea compatibilității între browsere va îmbunătăți și mai mult experiența de defilare lină, făcând paginile dvs. web mai atractive și mai plăcute de navigat.