मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

Scrollspy

व्ह्यूपोर्टमध्ये सध्या कोणता दुवा सक्रिय आहे हे सूचित करण्यासाठी स्क्रोल स्थितीवर आधारित बूटस्ट्रॅप नेव्हिगेशन किंवा सूची गट घटक स्वयंचलितपणे अद्यतनित करा.

या पृष्ठावर

हे कसे कार्य करते

Scrollspy योग्यरित्या कार्य करण्यासाठी काही आवश्यकता आहेत:

  • ते बूटस्ट्रॅप एनएव्ही घटक किंवा सूची गटावर वापरले जाणे आवश्यक आहे .
  • Scrollspy ला position: relative;तुम्ही ज्या घटकाची हेरगिरी करत आहात त्याची आवश्यकता असते, सहसा <body>.
  • अँकर ( <a>) आवश्यक आहेत आणि त्यासह घटकाकडे निर्देश करणे आवश्यक आहे id.

यशस्वीरित्या अंमलात आणल्यावर, तुमचा एनएव्ही किंवा सूची गट त्यानुसार अपडेट होईल, .activeत्यांच्या संबंधित लक्ष्यांच्या आधारावर वर्ग एका आयटमवरून दुसर्‍याकडे हलवेल.

स्क्रोल करण्यायोग्य कंटेनर आणि कीबोर्ड प्रवेश

जर तुम्ही स्क्रोल करण्यायोग्य कंटेनर बनवत असाल तर (च्या व्यतिरिक्त <body>), कीबोर्ड ऍक्सेस सुनिश्चित करण्यासाठी एक heightसंच आणि overflow-y: scroll;त्यावर लागू केल्याचे सुनिश्चित करा.tabindex="0"

नवबारमधील उदाहरण

navbar खालील क्षेत्र स्क्रोल करा आणि सक्रिय वर्ग बदल पहा. ड्रॉपडाउन आयटम देखील हायलाइट केले जातील.

प्रथम शीर्षक

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

दुसरे शीर्षक

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

तिसरे शीर्षक

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

चौथे शीर्षक

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

पाचवे शीर्षक

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

<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>

नेस्टेड nav सह उदाहरण

Scrollspy नेस्टेड .navs सह देखील कार्य करते. जर घरटे असेल तर .navत्याचे .activeपालक देखील असतील .active. नवबारच्या पुढील भागात स्क्रोल करा आणि सक्रिय वर्ग बदल पहा.

आयटम 1

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

आयटम 1-1

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

आयटम 1-2

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

आयटम 2

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

आयटम 3

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

आयटम 3-1

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

आयटम 3-2

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

<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

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

आयटम 2

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

आयटम 3

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

आयटम 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 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नंतर कोणत्याही बूटस्ट्रॅप घटकाच्या मूळ घटकाच्या ID किंवा वर्गासह विशेषता जोडा .nav.

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>

JavaScript द्वारे

तुमच्या CSS मध्ये जोडल्यानंतर position: relative;, JavaScript द्वारे scrollspy ला कॉल करा:

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

निराकरण करण्यायोग्य आयडी लक्ष्य आवश्यक आहेत

नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>DOM मधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>.

न दिसणारे लक्ष्य घटक दुर्लक्षित केले

दृश्यमान नसलेले लक्ष्य घटक दुर्लक्षित केले जातील आणि त्यांच्याशी संबंधित एनएव्ही आयटम कधीही हायलाइट केले जाणार नाहीत.

पद्धती

ताजेतवाने

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

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

विल्हेवाट लावणे

घटकाची स्क्रोलस्पाय नष्ट करते. (DOM घटकावरील संचयित डेटा काढून टाकते)

getInstance

स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित स्क्रोलस्पाय उदाहरण मिळवू देते

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित स्क्रोलस्पाय उदाहरण मिळवू देते किंवा ते सुरू न झाल्यास नवीन तयार करू देते.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-प्रमाणे जोडा data-bs-offset="".

नाव प्रकार डीफॉल्ट वर्णन
offset संख्या 10 स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल.
method स्ट्रिंग auto हेरलेला घटक कोणत्या विभागात आहे ते शोधते. autoस्क्रोल निर्देशांक मिळविण्यासाठी सर्वोत्तम पद्धत निवडेल. स्क्रोल निर्देशांक मिळविण्यासाठी पद्धत offsetवापरेल . स्क्रोल निर्देशांक मिळविण्यासाठी आणि गुणधर्म वापरेल .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft
target स्ट्रिंग | jQuery ऑब्जेक्ट | DOM घटक Scrollspy प्लगइन लागू करण्यासाठी घटक निर्दिष्ट करते.

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
activate.bs.scrollspy जेव्हा जेव्हा स्क्रोलस्पाय द्वारे नवीन आयटम सक्रिय होतो तेव्हा हा कार्यक्रम स्क्रोल घटकावर सक्रिय होतो. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})