Scrollspy
به طور خودکار ناوبری بوت استرپ یا اجزای گروه لیست را بر اساس موقعیت اسکرول به روز کنید تا مشخص کنید کدام پیوند در حال حاضر در نمای نمایش فعال است.
چگونه کار می کند
Scrollspy برای عملکرد صحیح چند الزام دارد:
- باید در یک جزء ناوبری بوت استرپ یا گروه لیست استفاده شود.
- Scrollspy به
position: relative;عنصری که در حال جاسوسی روی آن هستید، معمولاً نیاز<body>دارد. - لنگرها (
<a>) مورد نیاز هستند و باید به عنصری با آن اشارهidکنند.
هنگامی که با موفقیت پیاده سازی شد، گروه ناو یا لیست شما بر اساس آن به روز می شود و .activeکلاس را از یک آیتم به آیتم بعدی بر اساس اهداف مرتبط خود منتقل می کند.
ظروف قابل پیمایش و دسترسی به صفحه کلید
اگر یک محفظه قابل پیمایش می‌سازید (غیر از <body>)، حتماً یک heightمجموعه داشته باشید و overflow-y: scroll;روی آن اعمال کنید—در کنار a tabindex="0"برای اطمینان از دسترسی به صفحه‌کلید.
مثال در نوار ناوبری
ناحیه زیر نوار ناوبری را اسکرول کنید و تغییر کلاس فعال را تماشا کنید. موارد کشویی نیز برجسته خواهند شد.
عنوان اول
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
عنوان دوم
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
عنوان سوم
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
عنوان چهارم
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
عنوان پنجم
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</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="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
مثال با ناوبری تو در تو
Scrollspy همچنین با .navs های تودرتو کار می کند. اگر تو در تو .navباشد .activeپدر و مادرش هم خواهند بود .active. ناحیه کنار نوار ناوبری را اسکرول کنید و تغییر کلاس فعال را تماشا کنید.
مورد 1
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 1-1
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 1-2
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 2
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 3
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 3-1
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 3-2
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
مثال با لیست-گروه
Scrollspy همچنین با .list-groups کار می کند. ناحیه کنار گروه لیست را اسکرول کنید و تغییر کلاس فعال را تماشا کنید.
مورد 1
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 2
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 3
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
مورد 4
این برخی از محتوای نگهدارنده مکان برای صفحه scrollspy است. توجه داشته باشید که با اسکرول کردن صفحه به پایین، پیوند ناوبری مناسب برجسته می شود. در سراسر مثال جزء تکرار شده است. برای تأکید بر پیمایش و برجسته‌سازی، چند نسخه نمونه دیگر را در اینجا اضافه می‌کنیم.
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
استفاده
از طریق ویژگی های داده
برای افزودن آسان رفتار اسکرول‌اسپی به پیمایش نوار بالای خود، data-bs-spy="scroll"به عنصری که می‌خواهید از آن جاسوسی کنید اضافه کنید (به طور معمول، این مورد است <body>). سپس data-bs-targetویژگی را با شناسه یا کلاس عنصر والد هر .navجزء Bootstrap اضافه کنید.
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
از طریق جاوا اسکریپت
پس از افزودن position: relative;CSS خود، scrollspy را از طریق جاوا اسکریپت فراخوانی کنید:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
اهداف شناسایی قابل حل مورد نیاز است
پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. برای مثال، <a href="#home">home</a>باید با چیزی در DOM مطابقت داشته باشد مانند <div id="home"></div>.
عناصر هدف غیرقابل مشاهده نادیده گرفته شدند
عناصر هدف که قابل مشاهده نیستند نادیده گرفته می شوند و موارد ناوبری مربوطه آنها هرگز برجسته نمی شوند.
مواد و روش ها
تازه کردن
هنگام استفاده از scrollspy همراه با افزودن یا حذف عناصر از DOM، باید متد Refresh را به این صورت فراخوانی کنید:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
در معرض قرار دادن
Scrollspy یک عنصر را از بین می برد. (داده های ذخیره شده در عنصر DOM را حذف می کند)
getInstance
روش ایستا که به شما امکان می دهد نمونه اسکرول اسپی مرتبط با یک عنصر DOM را دریافت کنید
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
روش ایستا که به شما امکان می دهد نمونه اسکرول اسپی مرتبط با یک عنصر DOM را دریافت کنید یا در صورتی که اولیه نشده بود نمونه جدیدی ایجاد کنید.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-offset="".
| نام | تایپ کنید | پیش فرض | شرح |
|---|---|---|---|
offset |
عدد | 10 |
هنگام محاسبه موقعیت پیمایش، پیکسل‌هایی که باید از بالا جابجا شوند. |
method |
رشته | auto |
پیدا می کند که عنصر جاسوسی در کدام بخش قرار دارد. autoبهترین روش را برای دریافت مختصات اسکرول انتخاب می کند. offsetاز Element.getBoundingClientRect()روش برای بدست آوردن مختصات اسکرول استفاده خواهد کرد. برای بدست آوردن مختصات اسکرول از ویژگی and positionاستفاده می کند.HTMLElement.offsetTopHTMLElement.offsetLeft |
target |
رشته | شی jQuery | عنصر DOM | عنصری را برای اعمال افزونه Scrollspy مشخص می کند. |
مناسبت ها
| نوع رویداد | شرح |
|---|---|
activate.bs.scrollspy |
هر زمان که یک مورد جدید توسط scrollspy فعال شود، این رویداد روی عنصر اسکرول فعال می شود. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})