ساخت Scroll Indicator با CSS

نمایشگر اسکرول (Scroll Indicator) یک نوار یا عنصر بصری است که نشان می‌دهد کاربر در صفحه چه درصدی را پیموده است. این مورد به تجربهٔ کاربری کمک می‌کند، برای صفحات طولانی مقاله‌ها، مستندات، وبلاگ‌ها و صفحه‌های لندینگ بسیار مفید است. در این مقاله به روش‌های متداول ساخت Scroll Indicator با تمرکز روی CSS می‌پردازیم و راهکارهای بهینه، واکنش‌گرا و قابل گسترش را نشان می‌دهیم.

چرا از CSS استفاده کنیم؟

• قابلیت سفارشی‌سازی بالا برای ظاهر (رنگ، گرادیانت، سایه)
• عملکرد بهتر زمانی که محتوای استاتیک است
• تلفیق آسان با متغیرهای CSS برای انیمیشن و حالت‌های واکنش‌گرا

مثال عملی: Indicator ساده با CSS و یک خط JS کمکی

در عمل، برای محاسبهٔ درصد پیمایش نیاز به کمی جاوااسکریپت داریم تا مقدار متغیر CSS را بروزرسانی کند. در این روش تمام استایل‌ها با CSS انجام شده و JS فقط عدد درصد را محاسبه می‌کند.

/* HTML */<div class="progress-container">
  <div class="progress" aria-hidden="true"></div>
</div>
<main class="content">
  <!-- محتوای طولانی -->
</main>

/* CSS */:root { --progress: 0; }
.progress-container{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background: rgba(0,0,0,0.06);
  z-index:9999;
}
.progress{
  width:100%;
  height:100%;
  transform-origin:left;
  transform: scaleX(var(--progress));
  background: linear-gradient(90deg, #4ade80, #06b6d4);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* optional: make content scrollable height */.content{ min-height:300vh; padding-top:12px; }

/* JavaScript */(function(){
  const root = document.documentElement;
  const onScroll = () => {
    const scrollTop = window.scrollY || window.pageYOffset;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = docHeight > 0 ? (scrollTop / docHeight) : 0;
    root.style.setProperty('--progress', String(progress));
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();

توضیح: کد HTML یک کانتینر ثابت در بالای صفحه ایجاد می‌کند و عنصر .progress داخل آن عرض 100% دارد. با استفاده از transform: scaleX(var(–progress)) و transform-origin: left، مقدار متغیر CSS (–progress) که بین 0 و 1 است، پهنای بصری نوار را مشخص می‌کند. جاوااسکریپت تنها مسئول محاسبهٔ درصد پیمایش و تنظیم متغیر CSS بر روی :root است. این روش سبک، روان و قابل سفارشی‌سازی است و بخش استایل به‌کلی در CSS نگهداری می‌شود.

مزایا و نکات فنی

• استفاده از transform به جای تغییر width باعث عملکرد بهتر (GPU-accelerated) می‌شود.
• transition کوتاه برای نرمی؛ اگر نیاز به تاخیر کمتر دارید می‌توان transition را حذف کرد.
• از passive listeners در scroll استفاده کنید تا عملکرد اسکرول بهتر شود.

راهکار پیشرفته: استفادهٔ experimental از Scroll-Linked Animations (بدون JS)

در مرورگرهای مدرن Chromium می‌توان از قابلیت‌های جدید CSS مثل scroll-linked animations استفاده کرد تا بدون JS انیمیشن به اسکرول وابسته باشد. این ویژگی هنوز در همه مرورگرها پشتیبانی نمی‌شود و باید به‌عنوان گزینه پیشرفته مطرح شود.

/* Experimental CSS (may require flags or newest browsers) */.progress{
  transform-origin:left;
  animation: progress-bar 1s linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}
@keyframes progress-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

توضیح: این نمونه از ویژگی animation-timeline استفاده می‌کند تا انیمیشن کلیدی نسبت به موقعیت اسکرول اجرا شود؛ در نتیجه با بالا و پایین کردن صفحه، transform از 0 تا 1 تغییر می‌کند. توجه داشته باشید که این روش هنوز همه‌گیر نیست و برای پشتیبانی گسترده باید از fallback مانند روش قبلی استفاده کنید.

سفارشی‌سازی ظاهری و UX

• گرادیانت خطی همراه با سایهٔ کوچک برای جلوهٔ مدرن
• استفاده از ARIA یا متن جایگزین برای دسترسی بهتر (مثلاً aria-valuenow)
• مخفی‌سازی در صفحات کوتاه یا زمان‌بندی برای نمایش تنها بعد از اسکرول اولیه

نمونهٔ کوچک برای افزودن aria

<div class="progress-container" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <div class="progress"></div>
</div>

توضیح: با افزودن role=”progressbar” و به‌روز رسانی aria-valuenow توسط JS، ابزارهای کمکی (screen readers) نیز از وضعیت پیمایش آگاه می‌شوند و دسترسی بهتری فراهم می‌شود.

سازگاری مرورگر و نکات توسعه

سخن نهایی و توصیه‌های عملی

برای داشتن یک Scroll Indicator پایدار و سازگار، ترکیب CSS برای استایل و مقداردهی با JS برای محاسبه درصد بهترین انتخاب است. اگر می‌خواهید از تازه‌ترین ویژگی‌های CSS بهره ببرید، راهکارهای scroll-linked animations گزینهٔ جالب و بدون JS هستند اما باید برای مرورگرهای قدیمی fallback در نظر بگیرید.

نکات کلیدی برای اجرا در پروژه‌ها:

• از transform به جای تغییر width استفاده کنید (عملکرد بهتر).
• رویدادهای scroll را با گزینهٔ passive گوش دهید.
• برای تجربه کاربری بهتر، در موبایل فضای اضافی برای نوار در نظر بگیرید.

با همین روش‌ها می‌توانید انواع متنوعی از نشانگرهای پیمایش بسازید: عمودی، دایره‌ای کنار صفحه، یا حتی نشانگر بخش‌های مختلف صفحه. کدنویسی منظم و جداسازی منطق (JS) از استایل (CSS) نگهداری و توسعهٔ پروژه را آسان می‌کند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال