સ્ક્રોલસ્પાય
વ્યુપોર્ટમાં હાલમાં કઈ લિંક સક્રિય છે તે દર્શાવવા માટે સ્ક્રોલ સ્થિતિના આધારે બુટસ્ટ્રેપ નેવિગેશન અથવા સૂચિ જૂથ ઘટકોને આપમેળે અપડેટ કરો.
તે કેવી રીતે કામ કરે છે
જ્યારે એન્કર દ્વારા સંદર્ભિત તત્વને વ્યુમાં સ્ક્રોલ કરવામાં આવે છે ત્યારે સ્ક્રોલસ્પી .activeએન્કર ( ) તત્વો પર વર્ગને ટૉગલ કરે છે. સ્ક્રોલસ્પીનો ઉપયોગ બુટસ્ટ્રેપ નેવી ઘટક અથવા સૂચિ જૂથ સાથે શ્રેષ્ઠ રીતે થાય છે , પરંતુ તે વર્તમાન પૃષ્ઠમાં કોઈપણ એન્કર તત્વો સાથે પણ કામ કરશે. તે કેવી રીતે કાર્ય કરે છે તે અહીં છે.<a>idhref
-
શરૂ કરવા માટે, સ્ક્રોલસ્પાયને બે વસ્તુઓની જરૂર છે: નેવિગેશન, સૂચિ જૂથ, અથવા લિંક્સનો એક સરળ સેટ, ઉપરાંત સ્ક્રોલ કરી શકાય તેવું કન્ટેનર. સ્ક્રોલ કરી શકાય તેવું કન્ટેનર સેટ અને
<body>સાથેનું વૈવિધ્યપૂર્ણ ઘટક હોઈ શકે છે .heightoverflow-y: scroll -
સ્ક્રોલ કરી શકાય તેવા કન્ટેનર પર, ઉમેરો
data-bs-spy="scroll"અને સંલગ્ન નેવિગેશનની વિશિષ્ટતાdata-bs-target="#navId"ક્યાંnavIdછે . કીબોર્ડ ઍક્સેસ સુનિશ્ચિત કરવાidમાટે એ પણ શામેલ કરવાની ખાતરી કરો.tabindex="0" -
જેમ જેમ તમે "જાસૂસી" કન્ટેનરને સ્ક્રોલ કરો છો તેમ,
.activeસંકળાયેલ નેવિગેશનમાં એન્કર લિંક્સમાંથી એક વર્ગ ઉમેરવામાં અને દૂર કરવામાં આવે છે. લિંક્સમાં ઉકેલી શકાય તેવાidલક્ષ્યો હોવા આવશ્યક છે, અન્યથા તેને અવગણવામાં આવશે. ઉદાહરણ તરીકે,<a href="#home">home</a>DOM માં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે<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
Scrollspy નેસ્ટેડ .navઓ સાથે પણ કામ કરે છે. જો માળો .navછે .active, તો તેના માતાપિતા પણ હશે .active. નવબારની બાજુના વિસ્તારને સ્ક્રોલ કરો અને સક્રિય વર્ગમાં ફેરફાર જુઓ.
આઇટમ 1
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 1-1
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 1-2
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 2
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 3
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 3-1
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
આઇટમ 3-2
આ સ્ક્રોલસ્પી પૃષ્ઠ માટે કેટલીક પ્લેસહોલ્ડર સામગ્રી છે. નોંધ કરો કે જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરો છો, યોગ્ય નેવિગેશન લિંક પ્રકાશિત થાય છે. તે સમગ્ર ઘટક ઉદાહરણમાં પુનરાવર્તિત થાય છે. સ્ક્રોલિંગ અને હાઇલાઇટિંગ પર ભાર આપવા માટે અમે અહીં કેટલીક વધુ ઉદાહરણ નકલ ઉમેરતા રહીએ છીએ.
ધ્યાનમાં રાખો કે JavaScript પ્લગઇન દૃશ્યમાન હોઈ શકે તે બધામાંથી યોગ્ય તત્વ પસંદ કરવાનો પ્રયાસ કરે છે. એક જ સમયે બહુવિધ દૃશ્યમાન સ્ક્રોલસ્પી લક્ષ્યો કેટલીક સમસ્યાઓનું કારણ બની શકે છે.
<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>
સૂચિ જૂથ
Scrollspy પણ .list-groups સાથે કામ કરે છે. સૂચિ જૂથની બાજુના વિસ્તારને સ્ક્રોલ કરો અને સક્રિય વર્ગ ફેરફાર જુઓ.
આઇટમ 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>
સરળ એન્કર
Scrollspy એ એનએવી ઘટકો અને સૂચિ જૂથો સુધી મર્યાદિત નથી, તેથી તે <a>વર્તમાન દસ્તાવેજમાં કોઈપણ એન્કર તત્વો પર કામ કરશે. વિસ્તાર સ્ક્રોલ કરો અને .activeવર્ગમાં ફેરફાર જુઓ.
આઇટમ 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>
અદ્રશ્ય તત્વો
દૃશ્યમાન ન હોય તેવા લક્ષ્ય તત્વોને અવગણવામાં આવશે અને તેમની અનુરૂપ નેવી આઇટમ્સ .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>
JavaScript દ્વારા
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
વિકલ્પો
data-bs-ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા વિકલ્પો પસાર કરી શકાય છે, તમે ની જેમ, માં વિકલ્પ નામ ઉમેરી શકો છો data-bs-animation="{value}". ડેટા એટ્રિબ્યુટ્સ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને “ camelCase ” થી “ kebab-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% |
ઈન્ટરસેક્શન ઓબ્ઝર્વર રૂટમાર્જિન માન્ય એકમો, જ્યારે સ્ક્રોલ સ્થિતિની ગણતરી કરવામાં આવે છે. |
smoothScroll |
બુલિયન | false |
જ્યારે વપરાશકર્તા ScrollSpy અવલોકનક્ષમનો સંદર્ભ લેતી લિંક પર ક્લિક કરે છે ત્યારે સરળ સ્ક્રોલિંગને સક્ષમ કરે છે. |
target |
શબ્દમાળા, DOM તત્વ | null |
Scrollspy પ્લગઇન લાગુ કરવા માટે તત્વનો ઉલ્લેખ કરે છે. |
threshold |
એરે | [0.1, 0.5, 1] |
IntersectionObserver સ્ક્રોલ સ્થિતિની ગણતરી કરતી વખતે થ્રેશોલ્ડ માન્ય ઇનપુટ. |
નાપસંદ વિકલ્પો
v5.1.3 સુધી અમે offset& methodવિકલ્પોનો ઉપયોગ કરતા હતા, જે હવે નાપસંદ કરવામાં આવ્યા છે અને તેના સ્થાને rootMargin. પાછળની સુસંગતતા જાળવવા માટે, અમે આપેલને પાર્સ કરવાનું ચાલુ રાખીશું offset, rootMarginપરંતુ આ સુવિધા v6 માં દૂર કરવામાં આવશે .
પદ્ધતિઓ
| પદ્ધતિ | વર્ણન |
|---|---|
dispose |
તત્વની સ્ક્રોલસ્પીનો નાશ કરે છે. (DOM તત્વ પર સંગ્રહિત ડેટાને દૂર કરે છે) |
getInstance |
DOM એલિમેન્ટ સાથે સંકળાયેલ સ્ક્રોલસ્પી ઇન્સ્ટન્સ મેળવવા માટેની સ્ટેટિક પદ્ધતિ. |
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...
})