स्क्रॉलस्पाई

स्क्रॉल स्थिति के आधार पर बूटस्ट्रैप नेविगेशन या सूची समूह घटकों को स्वचालित रूप से अपडेट करें ताकि यह इंगित किया जा सके कि वर्तमान में व्यूपोर्ट में कौन सा लिंक सक्रिय है।

इस पृष्ठ पर

यह काम किस प्रकार करता है

स्क्रॉलस्पी .activeएंकर ( ) तत्वों पर वर्ग को टॉगल करता है जब एंकर द्वारा संदर्भित <a>तत्व को देखने में स्क्रॉल किया जाता है। स्क्रॉलस्पी का उपयोग बूटस्ट्रैप एनएवी घटक या सूची समूह के संयोजन में सबसे अच्छा किया जाता है , लेकिन यह वर्तमान पृष्ठ में किसी भी एंकर तत्वों के साथ भी काम करेगा। यहां देखिए यह कैसे काम करता है।idhref

शुरू करने के लिए, स्क्रॉलस्पी को दो चीजों की आवश्यकता होती है: एक नेविगेशन, सूची समूह, या लिंक का एक साधारण सेट, साथ ही एक स्क्रॉल करने योग्य कंटेनर। स्क्रॉल करने योग्य कंटेनर <body>एक या एक सेट के साथ एक कस्टम तत्व हो सकता है heightऔर overflow-y: scroll.
स्क्रॉल करने योग्य कंटेनर पर, जोड़ें data-bs-spy="scroll"और data-bs-target="#navId"जहां संबद्ध नेविगेशन का navIdअद्वितीय है। कीबोर्ड एक्सेस सुनिश्चित करने के लिए ida को भी शामिल करना सुनिश्चित करें।tabindex="0"
जैसे ही आप "जासूसी" कंटेनर को स्क्रॉल करते .activeहैं, संबंधित नेविगेशन के भीतर एंकर लिंक से एक वर्ग जोड़ा और हटा दिया जाता है। लिंक के समाधान योग्य idलक्ष्य होने चाहिए, अन्यथा उन्हें अनदेखा कर दिया जाता है। उदाहरण के लिए, <a href="#home">home</a>डीओएम में कुछ के अनुरूप होना चाहिए जैसे<div id="home"></div>
दिखाई नहीं देने वाले लक्षित तत्वों पर ध्यान नहीं दिया जाएगा। नीचे गैर-दृश्यमान तत्व अनुभाग देखें ।

उदाहरण

नेवबार के नीचे के क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें। ड्रॉपडाउन मेनू खोलें और ड्रॉपडाउन आइटम को भी हाइलाइट करें देखें।

पहला शीर्षक

यह स्क्रोलस्पाई पेज के लिए कुछ प्लेसहोल्डर सामग्री है। ध्यान दें कि जैसे ही आप पृष्ठ को नीचे स्क्रॉल करते हैं, उपयुक्त नेविगेशन लिंक हाइलाइट हो जाता है। यह पूरे घटक उदाहरण में दोहराया जाता है। स्क्रॉलिंग और हाइलाइटिंग पर जोर देने के लिए हम यहां कुछ और उदाहरण कॉपी जोड़ते रहते हैं।

दूसरा शीर्षक

तीसरा शीर्षक

चौथा शीर्षक

पांचवां शीर्षक

<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

नेस्टेड नौसेना

स्क्रॉलस्पी नेस्टेड .navएस के साथ भी काम करता है। यदि एक नेस्टेड .navहै .active, तो उसके माता-पिता भी होंगे .active। नेवबार के आगे के क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें।

वस्तु 1

ध्यान रखें कि जावास्क्रिप्ट प्लगइन उन सभी के बीच सही तत्व चुनने का प्रयास करता है जो दिखाई दे सकते हैं। एक ही समय में कई दृश्यमान स्क्रॉलस्पी लक्ष्य कुछ समस्याएँ पैदा कर सकते हैं।

मद 1-1

आइटम 1-2

आइटम 2

आइटम 3

आइटम 3-1

मद 3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

सूची समूह

स्क्रॉलस्पी .list-groupएस के साथ भी काम करता है। सूची समूह के आगे वाले क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें।

वस्तु 1 आइटम 2 आइटम 3 मद 4

वस्तु 1

आइटम 2

आइटम 3

मद 4

<div class="row">
  <div class="col-4">
    <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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

साधारण एंकर

स्क्रॉलस्पी एनएवी घटकों और सूची समूहों तक सीमित नहीं है, इसलिए यह <a>वर्तमान दस्तावेज़ में किसी भी एंकर तत्वों पर काम करेगा। क्षेत्र को स्क्रॉल करें और .activeकक्षा में परिवर्तन देखें।

वस्तु 1 आइटम 2 आइटम 3 मद 4 मद 5

वस्तु 1

आइटम 2

आइटम 3

मद 4

मद 5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

अदृश्य तत्व

दिखाई नहीं देने वाले लक्षित तत्वों को अनदेखा कर दिया जाएगा और उनके संबंधित एनएवी आइटम को एक .activeवर्ग प्राप्त नहीं होगा। एक गैर-दृश्यमान रैपर में प्रारंभ किए गए स्क्रॉलस्पी इंस्टेंस सभी लक्षित तत्वों को अनदेखा कर देंगे। refreshरैपर के दिखाई देने के बाद देखने योग्य तत्वों की जांच के लिए विधि का उपयोग करें ।

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

प्रयोग

डेटा विशेषताओं के माध्यम से

अपने टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ने data-bs-spy="scroll"के लिए, उस तत्व में जोड़ें जिसे आप जासूसी करना चाहते हैं (आमतौर पर यह होगा <body>)। फिर किसी बूटस्ट्रैप घटक के मूल तत्व के या वर्ग नाम के data-bs-targetसाथ विशेषता जोड़ें।id.nav

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

जावास्क्रिप्ट के माध्यम से

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

विकल्प

चूंकि विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं, आप विकल्प नाम को में जोड़ सकते हैं data-bs-, जैसा कि में है data-bs-animation="{value}"। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय केस प्रकार के विकल्प के नाम को " CamelCase " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, data-bs-custom-class="beautifier"के बजाय उपयोग करें data-bs-customClass="beautifier"।

बूटस्ट्रैप 5.2.0 के अनुसार, सभी घटक एक प्रयोगात्मक आरक्षित डेटा विशेषता data-bs-configका समर्थन करते हैं जो JSON स्ट्रिंग के रूप में सरल घटक कॉन्फ़िगरेशन को रख सकता है। जब किसी तत्व में data-bs-config='{"delay":0, "title":123}'और data-bs-title="456"विशेषताएँ होती हैं, तो अंतिम titleमान होगा 456और अलग डेटा विशेषताएँ पर दिए गए मानों को ओवरराइड कर देंगी data-bs-config। इसके अलावा, मौजूदा डेटा विशेषताएँ JSON मान जैसे data-bs-delay='{"show":0,"hide":150}'.

नाम	टाइप	चूक	विवरण
`rootMargin`	डोरी	`0px 0px -25%`	स्क्रॉल स्थिति की गणना करते समय इंटरसेक्शन ऑब्जर्वर रूटमार्जिन मान्य इकाइयाँ।
`smoothScroll`	बूलियन	`false`	जब कोई उपयोगकर्ता किसी ऐसे लिंक पर क्लिक करता है जो स्क्रॉलस्पाई वेधशालाओं को संदर्भित करता है, तो आसान स्क्रॉलिंग सक्षम करता है।
`target`	स्ट्रिंग, डोम तत्व	`null`	स्क्रॉलस्पी प्लगइन लागू करने के लिए तत्व निर्दिष्ट करता है।
`threshold`	सरणी	`[0.1, 0.5, 1]`	`IntersectionObserver` स्क्रॉल स्थिति की गणना करते समय थ्रेशोल्ड मान्य इनपुट।

बहिष्कृत विकल्प

v5.1.3 तक हम offset& methodविकल्पों का उपयोग कर रहे थे, जिन्हें अब हटा दिया गया है और rootMargin. पश्च संगतता बनाए रखने के लिए, हम दिए गए को पार्स करना जारी रखेंगे offset, rootMarginलेकिन यह सुविधा v6 में हटा दी जाएगी ।

तरीकों

तरीका	विवरण
`dispose`	किसी तत्व के स्क्रॉल को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
`getInstance`	एक DOM तत्व से जुड़े स्क्रॉलस्पी इंस्टेंस को प्राप्त करने के लिए स्टेटिक विधि।
`getOrCreateInstance`	किसी DOM तत्व से जुड़े स्क्रॉलस्पी इंस्टेंस प्राप्त करने के लिए स्टेटिक विधि, या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाने के लिए।
`refresh`	डीओएम में तत्वों को जोड़ते या हटाते समय, आपको रीफ्रेश विधि को कॉल करने की आवश्यकता होगी।

रीफ्रेश विधि का उपयोग कर एक उदाहरण यहां दिया गया है:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

आयोजन

आयोजन	विवरण
`activate.bs.scrollspy`	जब भी स्क्रॉल द्वारा एंकर सक्रिय किया जाता है तो यह घटना स्क्रॉल तत्व पर सक्रिय होती है।

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})