Thanh tiến trình trang với các biến JavaScript và CSS

---

Đây là cách thực hiện thanh tiến trình cuộn sẽ tăng lên khi bạn cuộn qua các trang của một trang web. Đó là một cách hay để truyền đạt một chỉ báo tiến trình để người đọc biết họ đang ở trong một bài đăng bao xa.

Nó sử dụng sức mạnh của Biến CSS và giải pháp được điều chỉnh từ một phần của bài nói chuyện xuất sắc này của Lea Verou.

Đầu tiên, hãy thêm đánh dấu sau ngay sau thẻ mở nội dung:

<div class="progress"></div>

Sau đó, tạo kiểu cho phần tử .progress này với thông tin như sau:

.progress {
  background: linear-gradient(to right, #F9EC31 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 4px;
  z-index: 1;
}

Lưu ý trong gradient tuyến tính, ta đang đề cập đến một biến CSS có tên --scroll , sẽ được cung cấp một giá trị khi cuộn.

Điều đó nghĩa là tất cả những gì còn lại phải làm là lắng nghe sự kiện cuộn của tài liệu và đặt giá trị của thuộc tính tùy chỉnh --scroll với tỷ lệ phần trăm cuộn. Ta sử dụng element.style.setProperty cho điều đó. Phần tử .progress sẽ nhận một giá trị nội tuyến cho --scroll khi nó được đặt.

Cảm ơn Phil Ricketts và giải pháp của anh ấy cho câu hỏi StackOverflow này để có một cách chính xác để tính phần trăm cuộn tài liệu:

var h = document.documentElement,
  b = document.body,
  st = 'scrollTop',
  sh = 'scrollHeight',
  progress = document.querySelector('.progress'),
  scroll;

document.addEventListener('scroll', function() {
  scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  progress.style.setProperty('--scroll', scroll + '%');
});

👉 Lưu ý IE hoặc Edge hiện không hỗ trợ các thuộc tính tùy chỉnh CSS. Tuy nhiên, sự hỗ trợ đang đến và đó là thời điểm nghĩa là tính năng này sẽ bị thoái hóa.

---

---

Các tin liên quan

Xem xét API JavaScript của trình quan sát thay đổi kích thước
2020-04-16
Xem xét API control panel JavaScript
2020-04-16
Xem xét Đề xuất Nhà điều hành Đường ống JavaScript
2020-04-16
Cách triển khai các phương thức mảng JavaScript từ Scratch
2020-04-09
Các đống nhị phân và hàng đợi ưu tiên qua JavaScript
2020-04-05
JavaScript bất biến có thể thay đổi
2020-04-02
Hiểu các tham số mặc định trong JavaScript
2020-03-31
Cookie là gì và cách làm việc với chúng bằng JavaScript
2020-03-19
Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
2020-03-18
Phương thức getOwnPropertyDescriptors trong JavaScript
2020-03-12