Hướng dẫn tạo thanh tiến trình đọc trên website
Để bảo vệ nội dung trên website, tránh việc bị sao chép, đánh cắp thông tin, bạn có thể thêm các đoạn code dưới đây để kích hoạt tính năng anti copy.
· 1 phút đọc.
Để bật tính năng tiến trình đọc trên website, nhằm xác định tiến độ đọc hết bài, nội dung trên một trang nhất định, bạn có thể thêm các đoạn code dưới đây để kích hoạt tính năng , cụ thể:
<div id="scroll-progress" class="bg-primary h-1 fixed top-0 left-0 z-50"> </div>
<script type="module">
window.addEventListener("scroll", function () {
const scrollableHeight =
document.documentElement.scrollHeight - window.innerHeight;
const scrolled = window.scrollY;
const progressBar = document.getElementById("scroll-progress");
const progress = (scrolled / scrollableHeight) * 100;
progressBar.style.width = progress + "%";
});
</script>
Lưu ý, tiến trình đọc được quan tâm nhiều trên bài viết, nên hãy đặt đoạn javascript này trong file tương ứng, để tăng hiệu quả và trải nghiệm đọc cho người dùng.
Share:
