Cách triển khai tính năng cuộn vô hạn trong ứng dụng web
Cuộn vô hạn cho phép tải nội dung liên tục khi người dùng di chuyển xuống trang, không giống như phương pháp nhấp để tải của phân trang truyền thống. Tính năng này có thể mang lại trải nghiệm mượt mà hơn, đặc biệt là trên thiết bị di động.
Khám phá quy trình triển khai giao diện cuộn vô hạn bằng cách sử dụng HTML cơ bản, CSS phong cách và các kỹ thuật JavaScript linh hoạt.
Thiết lập giao diện người dùng
Sử dụng khung HTML cơ bản để hiển thị nội dung của bạn. Một mẫu như sau:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
tệp Bảng định kiểu xếp chồng (CSS) và tệp JavaScript (JS).
Tạo kiểu CSS cho nội dung có thể cuộn
Để trình bày đồ họa giữ chỗ theo cách sắp xếp giống như lưới, hãy bao gồm các quy tắc về phong cách sau trong tệp “style.css” của bạn:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33%-2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
Hiện tại, giao diện trang web của bạn sẽ giống với bố cục và thiết kế được cung cấp bên dưới:
Triển khai cốt lõi với JS
Để kết hợp hiệu quả chức năng cuộn vô hạn trong ứng dụng web của bạn, điều quan trọng là phải giám sát khoảng cách của người dùng với phần cuối của khu vực nội dung hoặc toàn bộ trang web. Điều này có thể đạt được bằng cách sử dụng JavaScript và CSS để quan sát vị trí của sự kiện cuộn so với chiều cao của khung nhìn và kích hoạt các hành động thích hợp tương ứng.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY \+ window.innerHeight >=
document.documentElement.scrollHeight-100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Để bắt đầu, chúng ta sẽ phát triển một hàm truy xuất dữ liệu giữ chỗ bổ sung. Điều này có thể đạt được bằng cách triển khai lệnh gọi API hoặc sử dụng truy vấn cơ sở dữ liệu tùy thuộc vào yêu cầu cụ thể của ứng dụng của bạn. Dữ liệu được truy xuất sau đó sẽ được sử dụng làm đầu vào để xử lý thêm và hiển thị trong giao diện người dùng.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
Đối với dự án này, bạn có thể sử dụng API từ fakestoreapi.
Để xác minh rằng dữ liệu của bạn đang được truy xuất khi bạn cuộn qua trang, bạn nên kiểm tra bảng điều khiển dành cho nhà phát triển của trình duyệt để biết bất kỳ kết quả đầu ra hoặc dấu hiệu thành công nào trong việc truy xuất dữ liệu. Điều này có thể cung cấp thông tin chi tiết và phản hồi hữu ích về chức năng của tập lệnh.
Để giảm thiểu các vấn đề về hiệu suất tiềm ẩn phát sinh từ việc truy xuất dữ liệu lặp đi lặp lại trong khi cuộn, bạn nên thiết lập trạng thái tải thông tin ban đầu, từ đó đảm bảo thiết bị hoạt động hiệu quả.
let isFetching = false;
Để đảm bảo việc tìm nạp dữ liệu được thực hiện một cách hiệu quả, cần phải sửa đổi cách triển khai chức năng tìm nạp để chỉ tiến hành truy xuất thông tin sau khi quá trình truy xuất thông tin trước đó đã được hoàn thành thành công. Điều này có thể đạt được bằng cách đưa logic bổ sung vào trong mã để giám sát và quản lý luồng thực thi của nhiều yêu cầu đồng thời, do đó ngăn ngừa mọi tắc nghẽn hoặc chậm trễ tiềm ẩn có thể phát sinh do hoạt động đồng thời trên các tài nguyên được chia sẻ.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
Hiển thị nội dung mới
Để cập nhật động cách trình bày trực quan của nguồn cấp tin tức khi người dùng cuộn qua nó, một cách tiếp cận là xác định hàm sửa đổi phần tử gốc chứa các mục danh sách đại diện cho mỗi bài đăng trong nguồn cấp dữ liệu. Điều này có thể đạt được bằng cách thêm các thành phần hình ảnh mới vào vùng chứa này khi người dùng cuộn xuống sâu hơn trên trang, cập nhật hiệu quả phần được hiển thị của nguồn cấp dữ liệu với các bài đăng mới hơn.
Đầu tiên, chọn phần tử cha:
const productsList = document.querySelector(".products__list");
Sau đó, tạo một hàm để nối thêm nội dung.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
Tóm lại, cần phải sửa đổi hàm fetch và chuyển tiếp thông tin lấy được sang phương thức append.
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
Thật vậy, việc triển khai chức năng cuộn vô hạn đã được tích hợp thành công, do đó cho phép điều hướng liền mạch thông qua một loạt nội dung dường như vô tận khi người ta di chuyển xuống trang.
Cải tiến cuộn vô hạn
Để cải thiện trải nghiệm của người dùng, chúng tôi khuyên bạn nên hiển thị chỉ báo tải trong khi truy xuất nội dung mới. Điều này có thể được thực hiện bằng cách kết hợp mã HTML sau.
<h1 class="loading-indicator">Loading...</h1>
Sau đó chọn phần tử tải.
const loadingIndicator = document.querySelector(".loading-indicator");
Tóm lại, hãy triển khai hai chức năng kiểm soát trạng thái hiển thị của chỉ báo tải bằng cách sử dụng JavaScript.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Sau đó, thêm chúng vào chức năng tìm nạp.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
Cung cấp cho:
Trình duyệt của bạn không hỗ trợ thẻ video.
Các phương pháp hay để cuộn vô hạn
Một số phương pháp hay nhất cần tuân theo bao gồm:
Bạn nên tránh yêu cầu quá nhiều mục cùng một lúc vì điều này có thể khiến trình duyệt bị sa lầy và làm giảm hiệu quả tổng thể.
Để giảm thiểu vấn đề về các yêu cầu mạng thường xuyên do tìm nạp nội dung ngay lập tức khi phát hiện sự kiện cuộn, một cách tiếp cận là sử dụng cơ chế gỡ lỗi. Bằng cách sử dụng kỹ thuật này, thao tác tìm nạp nội dung sẽ bị trì hoãn trong một khoảng thời gian nhất định sau khi sự kiện cuộn xảy ra. Do đó, nó giúp giảm số lượng yêu cầu mạng không cần thiết và cải thiện hiệu suất tổng thể.
Mặc dù một số người dùng có thể đánh giá cao sự tiện lợi của việc cuộn vô hạn nhưng điều quan trọng cần nhận ra là không phải ai cũng có sở thích này. Việc cung cấp tùy chọn thay thế dưới dạng thành phần phân trang có thể mang lại lợi ích cho những người thấy nó hiệu quả hơn hoặc thân thiện với người dùng hơn. Cuối cùng, việc cung cấp cả hai tùy chọn cho phép các cá nhân điều chỉnh trải nghiệm duyệt web theo nhu cầu và sở thích cá nhân của họ.
Sẽ thích hợp hơn nếu thông báo cho người dùng khi không còn nội dung nào để tải thay vì liên tục cố gắng truy xuất dữ liệu bổ sung.
Làm chủ việc tải nội dung liền mạch
Việc kết hợp cuộn vô hạn trong thiết kế trang web mang lại trải nghiệm người dùng liền mạch, đặc biệt là trên thiết bị di động, tính năng này ngày càng trở nên phổ biến trong bối cảnh kỹ thuật số ngày nay. Bằng cách tuân thủ các nguyên tắc được cung cấp trong bài viết này, các nhà phát triển có thể tích hợp hiệu quả chức năng này vào các dự án web của họ.
Khi thiết kế một trang web, điều quan trọng là phải xem xét cảm xúc của người dùng khi tương tác với nó. Để tạo điều kiện cho trải nghiệm tích cực, hãy hiển thị các chỉ báo về tiến trình và cung cấp thông báo lỗi rõ ràng để thông báo cho người dùng về bất kỳ vấn đề nào có thể phát sinh trong quá trình họ tương tác với trang web.