CSS এবং JavaScript ব্যবহার করে স্ক্রোল ইন্ডিকেটর তৈরিতে নিচের কোডটি সাহায্য করবে:
উদাহরণ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-size: 28px; margin:0px; padding:0px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .header { position: fixed; top: 0; margin-bottom: 100px; z-index: 1; width: 100%; background-color: #ebfffd; } .progressContainer { width: 100%; height: 20px; background: #ccc; } .progressBar { height: 20px; background: #724caf; width: 0%; } </style> </head> <body> <div class="header"> <h1>স্ক্রোল ইন্ডিকেটর উদাহরণ</h1> <div class="progressContainer"> <div class="progressBar"></div> </div> </div> <div class="content"> <h1>কিছু হেডার</h1> <h1>কিছু হেডার</h1> <h1>কিছু হেডার</h1> <h1>কিছু হেডার</h1> <h1>কিছু হেডার</h1> </div> <script> window.onscroll = function() {showProgress()}; function showProgress() { var scrollCalculate = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (scrollCalculate / height) * 100; document.querySelector(".progressBar").style.width = scrolled + "%"; } </script> </body> </html>
আউটপুট
উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:
পেজ নিচে স্ক্রোল করলে প্রগ্রেস বার বাড়বে:
