स्क्रॉलस्पाई
स्क्रॉल स्थिति के आधार पर बूटस्ट्रैप नेविगेशन या सूची समूह घटकों को स्वचालित रूप से अपडेट करें ताकि यह इंगित किया जा सके कि वर्तमान में व्यूपोर्ट में कौन सा लिंक सक्रिय है।
यह काम किस प्रकार करता है
ठीक से काम करने के लिए स्क्रॉलस्पी की कुछ आवश्यकताएं हैं:
- यदि आप स्रोत से हमारी जावास्क्रिप्ट बना रहे हैं, तो इसके लिए
util.js. - इसका उपयोग बूटस्ट्रैप एनएवी घटक या सूची समूह पर किया जाना चाहिए ।
- स्क्रॉलस्पी को
position: relative;उस तत्व की आवश्यकता होती है जिस पर आप जासूसी कर रहे हैं, आमतौर पर<body>. - के अलावा अन्य तत्वों पर जासूसी करते समय , एक सेट और लागू
<body>होना सुनिश्चित करें ।heightoverflow-y: scroll; - एंकर (
<a>) आवश्यक हैं और उस तत्व को इंगित करना चाहिएid।
सफलतापूर्वक कार्यान्वित होने पर, आपकी नौसेना या सूची समूह तदनुसार अपडेट हो जाएगा, .activeकक्षा को उनके संबद्ध लक्ष्यों के आधार पर एक आइटम से दूसरे आइटम पर ले जाया जाएगा।
नवबार में उदाहरण
नेवबार के नीचे के क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें। ड्रॉपडाउन आइटम भी हाइलाइट किए जाएंगे।
@मोटा
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। आपको बेहतरीन वास्तुकला मिली है। पासपोर्ट टिकट, वह महानगरीय है। ठीक है, ताजा, भयंकर, हमने इसे लॉक पर प्राप्त किया। कभी योजना नहीं बनाई कि एक दिन मैं तुम्हें खो दूंगा। वह तुम्हारा दिल खा जाती है। आपका चुंबन लौकिक है, हर चाल जादू है। मेरा मतलब है, मेरा मतलब है जैसे वह वही है। नमस्कार प्रियजनों चलो एक यात्रा करते हैं। बस 4 जुलाई की रात की तरह! लेकिन आप बल्कि बर्बाद हो जाएंगे।
@mdo
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। 'क्योंकि वह संग्रह और कलाकार है। (इस तरह हम करते हैं) तो आप जादू से खेलना चाहते हैं। तो इससे पहले कि आप मुझे यह सब दें, बस सुनिश्चित हो जाएं। मैं चल रहा हूँ, मैं हवा में चल रहा हूँ (आज रात)। बात छोड़ो, सब सुन लिया, चलने का समय हो गया।
एक
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। आपको मीलों ऊँचा, इतना ऊँचा ले जाता है, क्योंकि उसके पास वह एक अंतर्राष्ट्रीय मुस्कान है। मेरे बिस्तर में एक अजनबी है, मेरे सिर में तेज़ है। धत्तेरे की। दूसरे जन्म में मैं तुम्हें रहने दूंगा। 'क्योंकि मैं, मैं कुछ भी करने में सक्षम हूँ। मेरी ताज की लड़ाई के लिए तैयार। अपने माता-पिता की शराब चुराकर छत पर चढ़ जाता था। टोन, टैन फिट और रेडी, इसे चालू करें क्योंकि यह भारी हो रहा है। उसका प्यार एक दवा की तरह है। मुझे लगता है कि मैं भूल गया था कि मेरे पास एक विकल्प था।
दो
Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.
three
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। यदि आप नृत्य करना चाहते हैं, यदि आप यह सब चाहते हैं, तो आप जानते हैं कि मैं वह लड़की हूं जिसे आपको कॉल करना चाहिए। तूफान के माध्यम से मैं चलूंगा। तो चलिए मैं आपको आपके बर्थडे सूट में लाता हूँ। जो उसे लेकर चला गया। पिछली शुक्रवार की रात, हाँ मुझे लगता है कि हमने कानून तोड़ा, हमेशा कहते हैं कि हम रुकने वाले हैं। 'क्योंकि वह योको की थोड़ी सी है, और वह' ओह नहीं 'की थोड़ी सी है। मुझे जॉ ड्रॉपपिन चाहिए', आई पॉपपिन', हेड टर्निन', बॉडी शॉकिन'। हाँ, हमने अपने क्रेडिट कार्ड को अधिकतम किया और बार से बाहर हो गए।
और कुछ और प्लेसहोल्डर सामग्री, अच्छे उपाय के लिए।
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
नेस्टेड नेवी के साथ उदाहरण
स्क्रॉलस्पी नेस्टेड .navएस के साथ भी काम करता है। यदि एक नेस्टेड .navहै .active, तो उसके माता-पिता भी होंगे .active। नेवबार के आगे के क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें।
वस्तु 1
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 1 से संबंधित है। आपको मीलों ऊंचा, इतना ऊंचा ले जाता है, 'क्योंकि उसके पास वह एक अंतरराष्ट्रीय मुस्कान है। मेरे बिस्तर में एक अजनबी है, मेरे सिर में तेज़ है। धत्तेरे की। दूसरे जन्म में मैं तुम्हें रहने दूंगा। 'क्योंकि मैं, मैं कुछ भी करने में सक्षम हूँ। मेरी ताज की लड़ाई के लिए तैयार। अपने माता-पिता की शराब चुराकर छत पर चढ़ जाता था। टोन, टैन फिट और रेडी, इसे चालू करें क्योंकि यह भारी हो रहा है। उसका प्यार एक दवा की तरह है। मुझे लगता है कि मैं भूल गया था कि मेरे पास एक विकल्प था।
मद 1-1
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 1-1 से संबंधित है। आपको बेहतरीन वास्तुकला मिली है। पासपोर्ट टिकट, वह महानगरीय है। ठीक है, ताजा, भयंकर, हमने इसे लॉक पर प्राप्त किया। कभी योजना नहीं बनाई कि एक दिन मैं तुम्हें खो दूंगा। वह तुम्हारा दिल खा जाती है। आपका चुंबन लौकिक है, हर चाल जादू है। मेरा मतलब है, मेरा मतलब है जैसे वह वही है। नमस्कार प्रियजनों चलो एक यात्रा करते हैं। बस 4 जुलाई की रात की तरह! लेकिन आप बल्कि बर्बाद हो जाएंगे।
आइटम 1-2
Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
Item 2
Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.
Item 3
Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.
Item 3-1
Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.
Item 3-2
स्क्रॉलस्पी उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 3-2 से संबंधित है। आप मूल हैं, प्रतिस्थापित नहीं किया जा सकता। सारी रात वे बज रहे हैं, तुम्हारा गाना। कैलिफ़ोर्निया की लड़कियां हम निर्विवाद हैं। बिना पिंजरे के पंछी की तरह। अब कोई डर नहीं है, जाने दो और बस आज़ाद हो जाओ, मैं तुम्हें बिना शर्त प्यार करूंगा। मैं दीवार पर लिखा हुआ देख सकता हूं। आप दुनिया की यात्रा कर सकते हैं लेकिन सुनहरे तट के करीब कुछ भी नहीं आता है।
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="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>
सूची-समूह के साथ उदाहरण
स्क्रॉलस्पी .list-groupएस के साथ भी काम करता है। सूची समूह के आगे वाले क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें।
वस्तु 1
स्क्रॉलस्पी सूची-समूह उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 1 से संबंधित है। क्षमा याचना की आवश्यकता नहीं है। अब कोई डर नहीं है, जाने दो और बस आज़ाद हो जाओ, मैं तुम्हें बिना शर्त प्यार करूंगा। पिछले शुक्रवार की रात। एक शर्मीला आदमी मत बनो मैं शर्त लगा सकता हूँ कि यह सुंदर है। हाई स्कूल के बाद की गर्मी जब हम पहली बार मिले थे। 'क्योंकि वह संग्रह और कलाकार है। क्या? रुकना। सोचा कि मैं अपवाद था।
आइटम 2
स्क्रॉलस्पी सूची-समूह उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 2 से संबंधित है। हाँ, वह अपनी ताल पर नाचती है। धत्तेरे की। आप सबसे महान हो सकते थे। 'क्योंकि तुम एक पटाखा हो। शायद यही वजह है कि सारे दरवाजे बंद हैं। अपना दिल खोलो और बस इसे शुरू करने दो। तो ट्रेस ठाठ, हाँ, वह एक क्लासिक है।
आइटम 3
स्क्रॉलस्पी सूची-समूह उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 3 से संबंधित है। हम ऊंचे और ऊंचे जाते हैं। एक दूसरे के बिना कभी नहीं, हमने एक समझौता किया। मैं हवा पर चल रहा हूं। किसी ने कहा कि आपने अपना टैटू हटा दिया है। अब मैं तितली की तरह तैर रहा हूँ। टोन, टैन फिट और रेडी, इसे चालू करें क्योंकि यह भारी हो रहा है। क्योंकि एक बार तुम मेरे हो, एक बार तुम मेरे हो। आपको बस प्रकाश को प्रज्वलित करना होगा और इसे चमकने देना होगा! तो हम बुलेवार्ड मारा। क्या तुमने कभी महसूस किया, कागज को इतना पतला महसूस किया। मैं यह सब देखता हूं, मैं इसे अभी देखता हूं।
मद 4
स्क्रॉलस्पी सूची-समूह उदाहरण के लिए प्लेसहोल्डर सामग्री। यह आइटम 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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<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-spy="scroll"के लिए, उस तत्व में जोड़ें जिसे आप जासूसी करना चाहते हैं (आमतौर पर यह होगा <body>)। फिर किसी बूटस्ट्रैप घटक data-targetके मूल तत्व की आईडी या वर्ग के साथ विशेषता जोड़ें।.nav
body {
position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
जावास्क्रिप्ट के माध्यम से
अपने सीएसएस में जोड़ने के बाद position: relative;, जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पी को कॉल करें:
$('body').scrollspy({ target: '#navbar-example' })
समाधान योग्य आईडी लक्ष्य आवश्यक
नेवबार लिंक में समाधान योग्य आईडी लक्ष्य होने चाहिए। उदाहरण के लिए, <a href="#home">home</a>डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>.
गैर- :visibleलक्षित तत्वों पर ध्यान नहीं दिया गया
लक्ष्य तत्व जो :visiblejQuery के अनुसार नहीं हैं उन्हें अनदेखा कर दिया जाएगा और उनके संबंधित एनएवी आइटम को कभी भी हाइलाइट नहीं किया जाएगा।
तरीकों
.scrollspy('refresh')
डीओएम से तत्वों को जोड़ने या हटाने के संयोजन के साथ स्क्रॉलस्पी का उपयोग करते समय, आपको रीफ्रेश विधि को इस तरह कॉल करना होगा:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
किसी तत्व के स्क्रॉल को नष्ट कर देता है।
विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-offset=""।
| नाम | टाइप | चूक | विवरण |
|---|---|---|---|
| ओफ़्सेट | संख्या | 10 | स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफ़सेट करने के लिए पिक्सेल। |
| तरीका | डोरी | ऑटो | पता लगाता है कि जासूसी तत्व किस अनुभाग में है। autoस्क्रॉल निर्देशांक प्राप्त करने के लिए सबसे अच्छी विधि का चयन करेगा। offsetस्क्रॉल निर्देशांक प्राप्त करने के लिए jQuery ऑफ़सेट विधि का उपयोग करेगा। positionस्क्रॉल निर्देशांक प्राप्त करने के लिए jQuery स्थिति विधि का उपयोग करेगा। |
| लक्ष्य | स्ट्रिंग | jQuery वस्तु | डोम तत्व | स्क्रॉलस्पी प्लगइन लागू करने के लिए तत्व निर्दिष्ट करता है। |
आयोजन
| घटना प्रकार | विवरण |
|---|---|
| सक्रिय करें.bs.scrollspy | यह घटना स्क्रॉल तत्व पर सक्रिय होती है जब भी कोई नया आइटम स्क्रॉलस्पी द्वारा सक्रिय हो जाता है। |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})