Tạo thanh báo vị trí scroll sử dụng Javascript

Làm thế nào để tạo thanh báo vị trí scroll? Trong bài này mình sẽ hướng đẫn các bạn tạo ra một thanh báo vị trí scroll bằng javascript. Mục đích tạo ra nó là gì? Cái này còn tùy trường hợp nhé, còn đối với mình khi cho nó vào website cải về mặt UI và để lại ấn tượng với người dùng.

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 !