સ્ક્રોલસ્પાય
વ્યુપોર્ટમાં હાલમાં કઈ લિંક સક્રિય છે તે દર્શાવવા માટે સ્ક્રોલ સ્થિતિના આધારે બુટસ્ટ્રેપ નેવિગેશન અથવા સૂચિ જૂથ ઘટકોને આપમેળે અપડેટ કરો.
તે કેવી રીતે કામ કરે છે
Scrollspy યોગ્ય રીતે કાર્ય કરવા માટે કેટલીક આવશ્યકતાઓ ધરાવે છે:
- તેનો ઉપયોગ બુટસ્ટ્રેપ નેવી ઘટક અથવા સૂચિ જૂથ પર થવો જોઈએ .
position: relative;તમે જે તત્વની જાસૂસી કરી રહ્યાં છો તેના પર સ્ક્રોલસ્પી જરૂરી છે, સામાન્ય રીતે<body>.- એન્કર (
<a>) જરૂરી છે અને તે સાથેના તત્વ તરફ નિર્દેશ કરવો આવશ્યક છેid.
જ્યારે સફળતાપૂર્વક અમલમાં મુકવામાં આવે છે, ત્યારે તમારું nav અથવા સૂચિ જૂથ તે મુજબ અપડેટ થશે, .activeવર્ગને તેમના સંબંધિત લક્ષ્યોના આધારે એક આઇટમમાંથી બીજી આઇટમમાં ખસેડશે.
સ્ક્રોલ કરી શકાય તેવા કન્ટેનર અને કીબોર્ડ એક્સેસ
જો તમે સ્ક્રોલ કરી શકાય તેવું કન્ટેનર બનાવી રહ્યાં હોવ (તે સિવાય <body>), કીબોર્ડની ઍક્સેસ સુનિશ્ચિત કરવા માટે એક heightસેટ અને overflow-y: scroll;તેના પર લાગુ કરવાની ખાતરી કરો.tabindex="0"
નવબારમાં ઉદાહરણ
નેવબારની નીચેનો વિસ્તાર સ્ક્રોલ કરો અને સક્રિય વર્ગમાં ફેરફાર જુઓ. ડ્રોપડાઉન વસ્તુઓ પણ હાઇલાઇટ કરવામાં આવશે.
પ્રથમ મથાળું
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
બીજું મથાળું
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ત્રીજું મથાળું
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ચોથું મથાળું
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
પાંચમું મથાળું
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
<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 નેસ્ટેડ .navઓ સાથે પણ કામ કરે છે. જો માળો .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'
})
ઉકેલી શકાય તેવા ID લક્ષ્યો જરૂરી છે
Navbar લિંક્સમાં ઉકેલી શકાય તેવા id લક્ષ્યો હોવા આવશ્યક છે. ઉદાહરણ તરીકે, <a href="#home">home</a>DOM માં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે <div id="home"></div>.
બિન-દૃશ્યમાન લક્ષ્ય તત્વો અવગણવામાં
ન દેખાતા લક્ષ્ય તત્વોને અવગણવામાં આવશે અને તેમની અનુરૂપ નેવી આઇટમ્સ ક્યારેય હાઇલાઇટ કરવામાં આવશે નહીં.
પદ્ધતિઓ
તાજું કરો
DOM માંથી ઘટકો ઉમેરવા અથવા દૂર કરવા સાથે સ્ક્રોલસ્પીનો ઉપયોગ કરતી વખતે, તમારે રિફ્રેશ પદ્ધતિને આના જેવી કૉલ કરવાની જરૂર પડશે:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
નિકાલ
તત્વની સ્ક્રોલસ્પીનો નાશ કરે છે. (DOM તત્વ પર સંગ્રહિત ડેટાને દૂર કરે છે)
getInstance
સ્ટેટિક મેથડ જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ સ્ક્રોલસ્પી ઇન્સ્ટન્સ મેળવવા માટે પરવાનગી આપે છે
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
સ્ટેટિક મેથડ જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ સ્ક્રોલસ્પી ઇન્સ્ટન્સ મેળવવાની પરવાનગી આપે છે અથવા જો તે આરંભ ન થયું હોય તો એક નવું બનાવો
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...
})