Bước 1: Cài đặt Lenis
npm install lenisHoặc khai báo thẳng trong package.json rồi cài:
{
"dependencies": {
"lenis": "^1.1.14"
}
}Sau đó:
npm installBước 2: Thêm stylesheet cho Lenis
Tạo hoặc mở resources/css/app.css và thêm:
html,
body {
height: 100%;
}
.lenis.lenis-smooth {
scroll-behavior: smooth;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}Đảm bảo layout Blade đã load CSS chứa các style trên.
Bước 3: Khởi tạo Lenis trong JavaScript
Mở resources/js/app.js và chọn một trong hai cách sau.
Cách 1 — Dùng autoRaf (đơn giản, cắm là chạy):
import Lenis from 'lenis';
const lenis = new Lenis({
autoRaf: true,
});
lenis.on('scroll', () => {
// Hook cho xử lý khi cuộn nếu cần
});
Cách 2 — Viết vòng lặp thủ công (tùy biến cao):
import Lenis from 'lenis';
const lenis = new Lenis();
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);Đảm bảo Vite nhập đúng entry:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Bước 4: Build hoặc chạy dev
npm run build
# hoặc
npm run devKiểm tra nhanh
Mở bất kỳ trang trong dự án và cuộn thử.
Nếu không có hiệu ứng, kiểm tra DevTools console.
Đảm bảo class từ Lenis đã áp dụng lên
<html>.
Ghi chú và mẹo
Với trang dài nhiều section, Lenis cho cảm giác mượt thấy rõ.
Nếu dùng
scroll-behaviorở thẻhtmlngoài phạm vi Lenis, có thể xung đột.Trang có iframe tương tác: bật lại
pointer-eventskhi cần ở state tương ứng.Ưu tiên
autoRafcho nhanh gọn. Chỉ viết loop thủ công khi cần đồng bộ thêm animation khác.
FAQ
Lenis là gì và dùng để làm gì trong Laravel?
Thư viện smooth scroll giúp cuộn mượt, tạo cảm giác liền mạch, dễ chịu cho người dùng.
Nên dùng autoRaf hay tự viết requestAnimationFrame?
autoRaf cho setup nhanh. Tự viết loop khi cần đồng bộ nhiều animation hoặc kiểm soát nhịp render.
Vì sao iframe không click được?
Rule pointer-events: none trong CSS mẫu vô hiệu hóa tương tác khi đang cuộn. Hãy bật lại khi cần.
Có xung đột với scroll-behavior mặc định không?
Có thể. Đảm bảo style chỉ áp dụng trong phạm vi class của Lenis.
Tài liệu tham khảo
Lenis Repository: GitHub – Lenis