Giới thiệu về Scroll Progress Bar
Định nghĩa và mục đích
Scroll Progress Bar (thanh tiến trình cuộn) là một phần của giao diện người dùng, thường được đặt ở phía trên hoặc phía dưới của trang web. Mục đích chính của nó là cung cấp một cách trực quan để hiển thị tiến độ cuộn trang của người dùng. Khi người dùng cuộn nội dung, thanh tiến trình sẽ hiển thị mức độ tiến trình của họ trong việc khám phá nội dung trên trang web.
Vai trò của Scroll Progress Bar trong giao diện người dùng
Scroll Progress Bar đóng vai trò quan trọng trong cải thiện trải nghiệm người dùng và tăng cường sự tương tác trên trang web. Những lý do sau đây làm cho nó trở thành một thành phần quan trọng của giao diện người dùng:
- Dẫn dắt người dùng: Scroll Progress Bar hướng dẫn người dùng về tiến trình cuộn trang và thông báo cho họ biết đã đọc được bao nhiêu nội dung. Điều này giúp cải thiện sự hiểu biết về cấu trúc trang web và hỗ trợ người dùng tìm kiếm thông tin một cách dễ dàng.
- Tăng tính tương tác: Thanh tiến trình cuộn cũng thúc đẩy sự tương tác của người dùng trên trang web. Người dùng sẽ cảm thấy hứng thú hơn khi thấy tiến trình của họ trên thanh tiến trình và sẽ tiếp tục cuộn trang để khám phá nội dung thêm.
- Tối ưu hóa trải nghiệm người dùng: Scroll Progress Bar giúp cải thiện trải nghiệm người dùng bằng cách giúp họ định hình được phạm vi nội dung và tổ chức thông tin một cách có trật tự.
Ứng dụng và trường hợp sử dụng
Scroll Progress Bar có rất nhiều ứng dụng và có thể được áp dụng trong nhiều trường hợp sử dụng khác nhau, bao gồm:
Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.
Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.
Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino: Business Hosting, NVMe Hosting và NVMe VPS
- iNet: Cloud VPS và Web Hosting
- Trang web dài: Trang web với nội dung dài, như blog, trang tin tức hoặc trang hướng dẫn, thường sẽ có lợi từ việc sử dụng Scroll Progress Bar để giúp người dùng theo dõi tiến trình đọc.
- Trình bày thuyết trình: Scroll Progress Bar cũng có thể được tích hợp vào trình bày thuyết trình trực tuyến, giúp khán giả biết được mức độ tiến trình của thuyết trình.
- Trang đọc sách điện tử: Trong các ứng dụng đọc sách điện tử, Scroll Progress Bar hỗ trợ độc giả biết mình đã đọc được bao nhiêu trang và còn bao nhiêu trang cần đọc.
- Hình ảnh và video dài: Scroll Progress Bar có thể được sử dụng trong trình chiếu hình ảnh hoặc video dài, cho phép người xem biết họ đã xem được bao nhiêu nội dung.
Cách thêm thanh Scroll Progress Bar
Để viết mã để tạo thanh tiến trình cuộn (scroll progress bar), bạn có thể sử dụng HTML, CSS và JavaScript. Dưới đây là một ví dụ cơ bản về cách làm điều đó:
File index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thanh tiến trình cuộn</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Phần tử chứa thanh tiến trình cuộn -->
<div class="progress-bar-container">
<div class="progress-bar" id="scroll-progress"></div>
</div>
<script src="script.js"></script>
</body>
</html>
File styles.css
/* Thiết lập ban đầu cho trang */
body {
margin: 0;
padding: 0;
}
/* Phần tử chứa thanh tiến trình cuộn */
.progress-bar-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #f0f0f0;
}
/* Thanh tiến trình cuộn */
.progress-bar {
height: 100%;
width: 0;
background-color: #007bff;
}
File script.js
// Sự kiện DOMContentLoaded sẽ được kích hoạt khi trang web đã tải xong và cây DOM đã sẵn sàng để thao tác.
document.addEventListener("DOMContentLoaded", function () {
// Lấy phần tử thanh tiến trình cuộn bằng cách sử dụng ID "scroll-progress"
const progressBar = document.getElementById("scroll-progress");
// Hàm này cập nhật chiều dài của thanh tiến trình cuộn dựa vào vị trí cuộn hiện tại của trang.
function updateProgressBar() {
// Chiều cao của cửa sổ trình duyệt
const windowHeight = window.innerHeight;
// Chiều cao của toàn bộ tài liệu
const documentHeight = document.documentElement.scrollHeight;
// Vị trí cuộn hiện tại của trang
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Tính toán tiến trình cuộn dựa vào vị trí cuộn và kích thước trang
const progress = (scrollTop / (documentHeight - windowHeight)) * 100;
// Cập nhật độ dài của thanh tiến trình cuộn
progressBar.style.width = progress + "%";
}
// Thêm sự kiện cuộn (scroll) cho cửa sổ trình duyệt, khi có sự kiện cuộn xảy ra, gọi hàm updateProgressBar()
window.addEventListener("scroll", updateProgressBar);
});
Để xem hiệu quả hoạt động của thanh tiến trình cuộn, bạn có thể tạo một project mà An Tran Digital đã tạo trên Codepen dưới đây và sao chép mã vào từng tệp tương ứng. Sau đó, bạn có thể chạy và thử nghiệm thanh tiến trình cuộn khi cuộn trang web.
See the Pen
Scroll Progress Bar by An Tran Digital (@antrandigital)
on CodePen.
Tóm tắt
Scroll Progress Bar là một thành phần quan trọng trong giao diện người dùng, giúp người dùng theo dõi tiến trình cuộn trang một cách trực quan. Với vai trò dẫn dắt người dùng, tăng tính tương tác và tối ưu hóa trải nghiệm người dùng, Scroll Progress Bar có nhiều ứng dụng và thích hợp cho các trường hợp sử dụng khác nhau. Bằng cách tích hợp thanh tiến trình cuộn vào trang web của bạn, bạn sẽ cải thiện trải nghiệm của người dùng và tăng cường tương tác trên trang web của mình.
