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

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

इस पेज पर

कोना काज करैत अछि

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

शुरू करय कें लेल, स्क्रॉलस्पी कें लेल दू चीजक कें आवश्यकता होयत छै: एकटा नेविगेशन, सूची समूह, या लिंक कें एकटा सरल सेट, प्लस एकटा स्क्रॉल करय योग्य कंटेनर. स्क्रॉल करय योग्य कंटेनर <body>एकटा सेट heightआ overflow-y: scroll.
स्क्रॉल करय योग्य कंटेनर पर, जोड़ू data-bs-spy="scroll"आ संबद्ध नेविगेशन कें अद्वितीय data-bs-target="#navId"कतय छै. कीबोर्ड पहुँच सुनिश्चित करबाक लेल एकटा सेहो अवश्य शामिल करू ।navIdidtabindex="0"
जैना-जैना आप “जासूसी” कंटेनर स्क्रॉल करय छै, एक .activeक्लास जोड़लऽ जाय छै आरू संबद्ध नेविगेशन के भीतर एंकर लिंक स॑ हटाय देलऽ जाय छै. लिंक मे समाधान योग्य idलक्ष्य हेबाक चाही, नहि त' ओकरा अनदेखी कएल जाइत अछि. जेना, a <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>

सरल लंगर

स्क्रॉलस्पाई nav घटक आरू सूची समूह तलक सीमित नै छै, अतः ई <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>

अदृश्य तत्व

लक्ष्य तत्व जे दृश्यमान नहि अछि ओकरा अनदेखी कएल जाएत आओर ओकर संगत nav आइटम कोनो .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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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%`	प्रतिच्छेदन पर्यवेक्षक rootMargin वैध इकाइयों, स्क्रॉल स्थिति की गणना करते समय \|
`smoothScroll`	बूलियन	`false`	जखन कोनों उपयोगकर्ता कोनों लिंक पर क्लिक करय छै जे ScrollSpy अवलोकनीय कें संदर्भित करय छै तखन सुचारू स्क्रॉलिंग कें सक्षम बनायत छै.
`target`	स्ट्रिंग, डोम तत्व	`null`	Scrollspy प्लगइन लागू करबाक लेल तत्व निर्दिष्ट करैत अछि.
`threshold`	सरणी	`[0.1, 0.5, 1]`	`IntersectionObserver` थ्रेशोल्ड वैध इनपुट, स्क्रॉल स्थिति की गणना करते समय \|

पदावनत विकल्प

v5.1.3 तक हम offset& methodविकल्प क उपयोग क रहल छलहुं, जे आब अप्रचलित भ गेल अछि आओर एकर स्थान पर rootMargin. पाछू संगतता रखबाक लेल, हम एकटा देल गेल केँ पार्स करैत रहब offset, rootMarginमुदा ई सुविधा v6 मे हटा देल जाएत .

विधियाँ

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

रिफ्रेश विधि क उपयोग कए एकटा उदाहरण प्रस्तुत अछि:

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...
})

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

कोना काज करैत अछि

उदाहरण के लिये

नवबर

प्रथम शीर्षक

दोसर शीर्षक

तेसर शीर्षक

चौथा शीर्षक

पाँचम शीर्षक

नेस्टेड नव

मद 1

मद 1-1 के अनुसार

मद 1-2 के अनुसार

मद 2

मद 3

मद 3-1 के अनुसार

मद 3-2 के अनुसार

सूची समूह

मद 1

मद 2

मद 3

मद 4

सरल लंगर

मद 1

मद 2

मद 3

मद 4

मद 5

अदृश्य तत्व

प्रयोग

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

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

विकल्प

विधियाँ

घटनाक्रम