Tạo Scroll Progress Bar bằng CSS và JavaScript

Tạo ra một thanh báo vị trí scroll là một cách hiệu quả để cải thiện trải nghiệm người dùng trên website của bạn. Thanh báo này không chỉ giúp người dùng dễ dàng theo dõi vị trí của mình trên trang mà còn tạo ra một hiệu ứng thị giác đẹp mắt. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo ra một thanh báo vị trí scroll bằng JavaScript và CSS.

Trước tiên mình sẽ có một chút html, css cơ bản.

<div id="root">
    <div class="scroll-line"></div>
</div>

#root {
    background-color: rgb(12, 8, 35);
    height: 3000px;
}
.scroll-line {
    height: 6px;
    top: 0;
    position: fixed;
    background-color: rgb(255, 153, 0);
    transition: all 0.1s linear;
}

Để thanh báo được hiện thị ra mình sẽ dùng javascript như sau:

const scroll_line = document.querySelector('.scroll-line');
window.addEventListener('scroll', () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    scroll_line.style.width = `${(scrollTop / (scrollHeight - clientHeight)) * 100}%`;
});

Việc đầu tiên là lấy được element của thanh báo, việc này chắn là đơn giản. Tiếp theo các bạn lấy giá trị của các thuộc tính scrollTop, clientHeight, scrollHeight, 3 thuộc tính này có nghĩa là sao? ScrollTop lấy giá trị vị trí cuộn hiện tại của phần tử có khả năng được được cuộn, cụ thể ở đây là phần tử gốc của trang. clientHeight lấy giá trị chiều cao khung nhìn của phần tử, scrollHeight trả về chiều cao thực của phần tử. Sau khi đã có các giá trị đó ta hay áp dụng công thức (scrollTop / (clientHieght - scrollHeight) * 100). Bạn có thăc mắc tại sao lại có công thức như này không, bây giờ cùng mình giải thích.

Với công thức đó ta vậy làm trong ngoặc trước (clientHieght - scrollHeight) khi 2 giá trị này trừ cho nhau ta sẽ nhận được phần còn lại của phần tử. Nếu bạn đang thấy khó hiểu thì mình dễ giải thích kỹ hơn scrollHeight là khung nhìn của bạn, clientHieght là chiều cao thực của phần tử khi (clientHieght - scrollHeight) sẽ nhận được chiều cao của phần còn lại cũng là phần đang bị ẩn đi.

Đối với (scrollTop / (clientHieght - scrollHeight) là scrollTop đã chiếm hết bao nhiêu phần trăm của phần bị ẩn đi từ đó nhân với 100 và kết qủa cuối cùng là số phần trăm của thanh báo cuộn xuống.

Trên đây là cách tạo thanh báo cuộn xuống bạn có thể trang trí cho website, tăng khả năng nhận biết vị trí của người dùng, bạn cũng có thể thay thế thanh cuộn dọc bằng thanh cuộn ngang.

Chúc các bạn thành công !