Scrollspy (پیشرفته)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

Scrollspy برای بروزرسانی خودکار لینک‌ها در یک لیست راهبری (به انگلیسی: Navigation) براساس مکان پیمایش (به انگلیسی: Scroll) به کار می‌رود.[۱]

نحوه ایجاد Scrollspy

مثال زیر نحوه ایجاد یک Scrollspy را نشان می‌دهد:

مثال

 1 <!-- The scrollable area -->
 2 <body data-spy="scroll" data-target=".navbar" data-offset="50">
 3 
 4 <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
 5 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
 6 ...
 7   <ul class="navbar-nav">
 8     <li><a href="#section1">Section 1</a></li>
 9     ...
10 </nav>
11 
12 <!-- Section 1 -->
13 <div id="section1">
14   <h1>Section 1</h1>
15   <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
16 </div>
17 ...
18 
19 </body>


مشاهدهٔ نتیجه


توضیح مثال

data-spy="scroll" را به عنصری که قرار است به عنوان مکان قابل پیمایش (به انگلیسی: Scrollable) استفاده شود، اضافه کنید (اغلب، این عنصر <body> است).

سپس ویژگی data-target را با مقدار id یا نام کلاس نوار راهبری (.navbar) اضافه کنید. این کار برای اطمینان از اتصال Navbar با مکان قابل پیمایش انجام می‌شود.

دقت کنید که عنصرها باید با id لینک‌های داخل آیتم‌های Navbar مطابقت داشته باشد (<div id="section1"> با <a href="#section1"> مطابقت داشته باشد).

ویژگی اختیاری data-offset تعداد پیکسل‌های فاصله از بالا را هنگام محاسبه مکان Scroll تعیین می‌کند. این کار زمانی مفید است که احساس می‌کنید لینک‌های داخل Navbar حالت فعال را خیلی زود یا در همان ابتدا هنگام پرش به عنصرهای قابل پیمایش تغییر می‌دهند. مقدار پیش فرض ۱۰ پیکسل است.

نیازمند مکان نسبی: عنصر data-spy=”scroll” نیازمند ویژگی مکان CSS با مقدار “relative” است تا به درستی کار کند.

منوی عمودی Scrollspy

در این مثال از Pillهای راهبری عمودی بعنوان منو استفاده می‌کنیم:

مثال

 1 <body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 2 
 3   <div class="container-fluid">
 4     <div class="row">
 5       <nav class="col-sm-3 col-4" id="myScrollspy">
 6         <ul class="nav nav-pills flex-column">
 7           <li class="nav-item">
 8             <a class="nav-link active" href="#section1">Section 1</a>
 9           </li>
10           ...
11         </ul>
12       </nav>
13       <div class="col-sm-9 col-8">
14         <div id="section1">
15           <h1>Section 1</h1>
16           <p>Try to scroll this page and look at the menu while scrolling!</p>
17         </div>
18         ...
19       </div>
20     </div>
21   </div>
22 
23 </body>


مشاهدهٔ نتیجه


مرجع کامل Scrollspy بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Scrollspy، متدها (Methods)و رویداد ها (Events)، به مرجع Scrollspy JS بوت استرپ ما مراجعه کنید.


منابع آموزشی