बूटस्ट्रैप जे एस स्क्रॉलस्पाई
जेएस स्क्रॉलस्पी
स्क्रॉल स्थिति के आधार पर नेविगेशन सूची में लिंक को स्वचालित रूप से अपडेट करने के लिए स्क्रॉलस्पी का उपयोग किया जाता है।
स्क्रॉलस्पी के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप स्क्रॉलस्पी ट्यूटोरियल पढ़ें ।
डेटा के माध्यम से-* विशेषताएँ
उस तत्व में जोड़ें data-spy="scroll"जिसे स्क्रॉल करने योग्य क्षेत्र के रूप में उपयोग किया जाना चाहिए (अक्सर यह <body>तत्व होता है)।
फिर आईडी के मान या नेविगेशन बार ( ) data-targetके वर्ग नाम के साथ विशेषता जोड़ें। .navbarयह सुनिश्चित करने के लिए है कि नेवबार स्क्रॉल करने योग्य क्षेत्र से जुड़ा है।
<div id="section1">ध्यान दें कि स्क्रॉल करने योग्य तत्वों को नेवबार की सूची आइटम ( मैच <a href="#section1">) के अंदर लिंक की आईडी से मेल खाना चाहिए ।
वैकल्पिक data-offsetविशेषता स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिए पिक्सेल की संख्या निर्दिष्ट करती है। यह तब उपयोगी होता है जब आपको लगता है कि स्क्रॉल करने योग्य तत्वों पर कूदते समय नेवबार के अंदर के लिंक सक्रिय स्थिति को बहुत जल्दी या बहुत जल्दी बदल देते हैं। डिफ़ॉल्ट 10 पिक्सेल है।
सापेक्ष स्थिति की आवश्यकता है: डेटा-स्पाई = "स्क्रॉल" वाले तत्व को ठीक से काम करने के लिए "रिश्तेदार" के मूल्य के साथ सीएसएस स्थिति संपत्ति की आवश्यकता होती है।
उदाहरण
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
$('body').scrollspy({target: ".navbar"})
स्क्रॉलस्पी विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-ऑफ़सेट = "" में है।
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
स्क्रॉलस्पी तरीके
निम्न तालिका सभी उपलब्ध स्क्रोलस्पाई विधियों को सूचीबद्ध करती है।
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
स्क्रॉलस्पी घटनाएँ
निम्न तालिका सभी उपलब्ध स्क्रॉलस्पी घटनाओं को सूचीबद्ध करती है।
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |