Scrollspy در Bootstrap

Scrollspy یکی از افزونه‌های قدرتمند و اغلب نادیده‌گرفته‌شده‌ی JavaScript در Bootstrap است که به‌طور خودکار اجزای ناوبری (مانند نوارهای ناوبری یا لیست‌ها) را بر اساس موقعیت اسکرول کاربر در صفحه، به‌روزرسانی می‌کند. آن را به‌عنوان نگهبانی بی‌صدا تصور کنید که به‌دقت مسیر حرکت کاربر را در محتوای شما دنبال می‌کند و بخش مربوطه را در ناوبری برجسته می‌سازد، تا بازخورد بصری شفاف و حس جهت‌دهی بهتری ارائه دهد.

از وب‌سایت‌های تک‌صفحه‌ای و صفحات مستندات گرفته تا مقالات بلند با ناوبری تعاملی، Scrollspy تجربه‌ی اسکرول منفعل را به سفری هدایت‌شده تبدیل می‌کند. این راهنمای جامع به بررسی دقیق Scrollspy در Bootstrap، نحوه راه‌اندازی، گزینه‌های پیکربندی، ویژگی‌های پیشرفته، ملاحظات دسترسی‌پذیری، و استراتژی‌های پیاده‌سازی خلاقانه‌ای می‌پردازد که فراتر از برجسته‌سازی ساده‌ی ناوبری هستند.

راه‌اندازی اولیه Scrollspy

راه‌اندازی Scrollspy شامل هدف‌گیری یک مؤلفه ناوبری و یک ناحیه قابل اسکرول (معمولاً <body> یا یک <div> خاص) است. این کار را می‌توان از طریق ویژگی‌های داده‌ای (data attributes) در HTML یا به‌صورت برنامه‌نویسی با JavaScript انجام داد.

۱. با استفاده از ویژگی‌های داده‌ای:

روی ظرف قابل اسکرول (معمولاً <body>) ویژگی data-bs-spy="scroll" را اضافه کنید.
از data-bs-target="#yourNavbarId" استفاده کنید تا مؤلفه ناوبری موردنظر را مشخص کنید.
data-bs-offset="مقدار" (اختیاری): میزان افست برای تعیین دقیق‌تر بخش فعال فعلی را تنظیم می‌کند، مخصوصاً اگر سربرگ ثابت دارید.

مثال HTML ساده:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Scrollspy</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            position: relative; /* Required for Scrollspy on body */
        }
        section {
            padding-top: 8rem;
            padding-bottom: 8rem;
        }
    </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" class="scrollspy-example">
    <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
        <a class="navbar-brand" href="#">Scrollspy</a>
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link active" href="#section1">Section 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#section3">Section 3</a></li>
                    <li><a class="dropdown-item" href="#section4">Section 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div data-bs-offset="0" data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example-2">
        <section id="section1">
            <h2>Section 1</h2>
            <p>...</p>
        </section>
        <section id="section2">
            <h2>Section 2</h2>
            <p>...</p>
        </section>
        <section id="section3">
            <h2>Section 3</h2>
            <p>...</p>
        </section>
        <section id="section4">
            <h2>Section 4</h2>
            <p>...</p>
        </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🔹 نکته: body { position: relative; } برای عملکرد صحیح الزامی است.

هر بخش از محتوا باید دارای یک id یکتا باشد که با مقادیر href در لینک‌های ناوبری مطابقت داشته باشد.

۲. راه‌اندازی با استفاده از JavaScript:

const scrollSpyElement = document.body; // Or a specific scrollable div
const scrollSpy = new bootstrap.ScrollSpy(scrollSpyElement, {
  target: '#navbar-example',
  offset: 50 // Example offset
});

// Or for a specific scrollable div:
const specificScrollable = document.querySelector('#scrollable-div');
const specificScrollSpy = new bootstrap.ScrollSpy(specificScrollable, {
  target: '#list-group-example',
  offset: 20
});

هدف‌گیری ساختارهای ناوبری مختلف

Scrollspy فقط برای نوارهای ناوبری (navbar) نیست. می‌توان از آن برای انواع دیگر ناوبری مانند:

.nav, .nav-pills, .nav-tabs
.list-group
لیست‌های ناوبری سفارشی

استفاده کرد، به شرطی که لینک‌های آن hrefهایی داشته باشند که به id بخش‌های محتوا اشاره کند.

تنظیم افست (Offset)

افست بسیار مهم است؛ مخصوصاً اگر سربرگ‌های ثابت دارید که ممکن است روی بالای بخش‌ها را بپوشانند. با افزایش مقدار افست، مطمئن می‌شوید که Scrollspy دقیقاً زمانی بخش را فعال می‌کند که قابل مشاهده باشد.

بهینه‌سازی عملکرد (Debouncing)

Scrollspy از eventهای scroll استفاده می‌کند. برای بهبود عملکرد، Bootstrap به احتمال زیاد از debouncing یا throttling استفاده می‌کند تا محاسبات را به‌حداقل برساند.

رویدادهای Scrollspy

Scrollspy رویداد activate.bs.scrollspy را منتشر می‌کند. می‌توانید با آن رویدادها تعامل داشته باشید:

const scrollSpyElement = document.body;
scrollSpyElement.addEventListener('activate.bs.scrollspy', event => {
  const activeLink = event.relatedTarget; // The newly active link's href
  console.log(`Active section: ${activeLink}`);
  // Perform custom actions based on the active section
});

ملاحظات دسترسی‌پذیری

متن لینک واضح: لینک‌های ناوبری باید متن توصیفی داشته باشند.
پیمایش با کیبورد: کاربران باید بتوانند با صفحه‌کلید در ناوبری حرکت کنند.
مدیریت فوکوس: وقتی کاربر به بخشی منتقل می‌شود، فوکوس باید در آن بخش مدیریت شود.
اسکرول نرم (smooth scrolling): برای جلوگیری از پرش محتوایی، از CSS مانند scroll-behavior: smooth; استفاده کنید.

استراتژی‌های پیاده‌سازی خلاقانه

Scrollspy را می‌توان در کاربردهای خلاقانه‌ای استفاده کرد:

هایلایت فهرست مطالب: برای مقالات بلند یا مستندات
نشانگر پیشرفت: ترکیب با نوار پیشرفت بصری
سایدبار تعاملی: آشکارسازی محتوا یا انیمیشن بر اساس بخش فعال
گالری تصاویر/ویدیو: برجسته‌سازی تصویر بندانگشتی مطابق با محتوای مشاهده‌شده
راهنمای مرحله‌به‌مرحله: مشخص کردن مرحله فعلی
تغییر زبان: در مستندات چندزبانه
انیمیشن حین اسکرول: انیمیشن‌های محتوایی هنگام فعال شدن بخش

مثال: هایلایت فهرست مطالب

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <nav id="toc-nav" class="list-group sticky-top">
                <a class="list-group-item list-group-item-action active" href="#intro">Introduction</a>
                <a class="list-group-item list-group-item-action" href="#section-one">Section One</a>
                <a class="list-group-item list-group-item-action" href="#section-two">Section Two</a>
                <a class="list-group-item list-group-item-action" href="#conclusion">Conclusion</a>
            </nav>
        </div>
        <div class="col-md-9 py-4" data-bs-spy="scroll" data-bs-target="#toc-nav" data-bs-offset="0" tabindex="0">
            <section id="intro">
                <h2>Introduction</h2>
                <p>...</p>
            </section>
            <section id="section-one">
                <h2>Section One</h2>
                <p>...</p>
            </section>
            <section id="section-two">
                <h2>Section Two</h2>
                <p>...</p>
            </section>
            <section id="conclusion">
                <h2>Conclusion</h2>
                <p>...</p>
            </section>
        </div>
    </div>
</div>

<script>
    const scrollSpyElement = document.querySelector('.col-md-9');
    const scrollSpy = new bootstrap.ScrollSpy(scrollSpyElement, {
        target: '#toc-nav',
        offset: 20
    });
</script>

نکات و بهترین روش‌ها

ساختار ناوبری واضح داشته باشید.
محتوا را به بخش‌های منطقی با idهای مشخص تقسیم کنید.
افست را دقیق تنظیم کنید تا بخش‌ها به‌درستی شناسایی شوند.
از اسکرول نرم استفاده کنید.
تست روی دستگاه‌ها و نمایشگرهای مختلف انجام دهید.
دسترسی‌پذیری را در اولویت قرار دهید.

جمع‌بندی

Scrollspy در Bootstrap ابزاری قدرتمند اما ظریف برای بهبود ناوبری و جهت‌دهی در صفحات اسکرول‌پذیر است. با برجسته‌سازی خودکار بخش فعال، بازخورد بصری موثری ارائه می‌دهد و تجربه‌ای تعاملی‌تر برای کاربران می‌سازد. با درک نحوه پیکربندی، گزینه‌ها و قابلیت‌های خلاقانه آن، می‌توانید تجربه‌ی کاربری را به‌طور چشمگیری بهبود دهید.