ސްކްރޯލްސްޕީ އެވެ
ވިއުޕޯޓްގައި މިހާރު އެކްޓިވް ކުރަނީ ކޮން ލިންކެއްކަން އަންގައިދިނުމަށްޓަކައި ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން ބޫޓްސްޓްރަޕް ނެވިގޭޝަން ނުވަތަ ލިސްޓް ގްރޫޕް ކޮމްޕޯނެންޓްތައް އޮޓޮމެޓިކުން އަޕްޑޭޓް ކުރެވޭނެއެވެ.
އެކަން ކުރާ ގޮތް
ސްކްރޯލްސްޕީ ރަނގަޅަށް މަސައްކަތް ކުރުމަށް ބޭނުންވާ މަދު ޝަރުތުތަކެއް އެބަހުއްޓެވެ:
- އެއީ ބޫޓްސްޓްރެޕް ނެވް ކޮމްޕޮނެންޓެއް ނުވަތަ ލިސްޓް ގްރޫޕެއްގައި ބޭނުންކުރަން ޖެހޭނެ އެއްޗެކެވެ .
- ސްކްރޯލްސްޕައި ބޭނުންވަނީ
position: relative;
ތިބާ ޖާސޫސް ކުރަމުންދާ އެލިމެންޓްގެ މައްޗަށް، އާންމުކޮށް<body>
. - އެންކަރސް (
<a>
) ބޭނުންވާ ކަމަށާއި އެއާއެކު އެލިމެންޓަކަށް އިޝާރާތްކުރަންޖެހޭނެއެވެid
.
ކާމިޔާބުކަމާއެކު ތަންފީޒު ކުރެވުމުން، ތިބާގެ ނެވް ނުވަތަ ލިސްޓް ގްރޫޕް އެއަށް ރިޢާޔަތްކޮށް އަޕްޑޭޓް ކުރާނެ، .active
އެތަކެތީގެ ގުޅުންހުރި ޓާގެޓްތަކަށް ބަލައިގެން ކްލާސް އެއް އައިޓަމުން އަނެއް އައިޓަމަށް ބަދަލުކުރާނެއެވެ.
ސްކްރޯލް ކުރެވޭ ކޮންޓެއިނަރާއި ކީބޯޑަށް ވަދެވޭނެ ގޮތް ހެދުން
ސްކްރޯލް ކުރެވޭ ކޮންޓެއިނަރެއް ހަދަމުންދާނަމަ (އެ ނޫން <body>
) height
ސެޓެއް ގެންގުޅެ އެއަށް އެޕްލައި ކުރުން ޔަގީން ކުރައްވާ- ކީބޯޑަށް ވަދެވޭނެ ގޮތް ކަށަވަރު ކުރުމަށް overflow-y: scroll;
a އާއެކު .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
ސް އާއި އެކުގައެވެ. ނެސްޓެޑް .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>
ލިސްޓް-ގްރޫޕް އާއެކު މިސާލު
ސްކްރޯލްސްޕީ ވެސް މަސައްކަތް ކުރަނީ .list-group
ސ އާއެކުގައެވެ. ލިސްޓް ގްރޫޕްގެ ކައިރީގައިވާ އޭރިއާ ސްކްރޯލްކޮށް އެކްޓިވް ކްލާސް ބަދަލުވާތަން ބަލާށެވެ.
އައިޓަމް 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
ޕޭރެންޓް އެލިމެންޓްގެ އައިޑީ ނުވަތަ ކްލާސް އާއި އެކު އެޓްރިބިއުޓް އިތުރު ކުރާށެވެ..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>
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް
ސީއެސްއެސް އަށް އެޑް position: relative;
ކުރުމަށްފަހު ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސްކްރޯލްސްޕައި އަށް ގުޅާލާށެވެ:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ބޭނުންވެއެވެ
ނަވްބާރ ލިންކްތަކުގައި ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ހުންނަން ޖެހެއެވެ. މިސާލަކަށް <a href="#home">home</a>
ޑީއޯއެމްގައި ހުންނަ އެއްޗަކާ ދިމާވާން ޖެހޭނީ <div id="home"></div>
.
ނުފެންނަ ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާށެވެ
ނުފެންނަ ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާ އެ އެލިމެންޓްތަކާ ގުޅޭ ނެވް އައިޓަމްތައް ދުވަހަކުވެސް ހައިލައިޓް ނުކުރެވޭނެއެވެ.
ގޮތްތައް
ރިފްރެޝް ކޮށްލާށެވެ
ޑޮމް އިން އެލިމެންޓްތައް އިތުރުކުރުމާއި ނުވަތަ ނައްތާލުމާ ގުޅިގެން ސްކްރޯލްސްޕީ ބޭނުންކުރާއިރު، ރިފްރެޝް މެތޯޑަށް ގޮވާލަން ޖެހޭނީ މިގޮތަށެވެ:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
ނައްތާލުން
އެލިމެންޓެއްގެ ސްކްރޯލްސްޕީ ނައްތާލައެވެ. (ޑޮމް އެލިމެންޓްގައި ރައްކާކޮށްފައިވާ ޑޭޓާ ނައްތާލައެވެ)
ގެޓްއިންސްޓޭންސް
ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ ސްކްރޯލްސްޕީ އިންސްޓޭންސް ހޯދުމަށް ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
ގެޓްއޯރކްރިއޭޓްއިންސްޓޭންސް
ޑޮމް އެލިމެންޓަކާ ގުޅިފައިވާ ސްކްރޯލްސްޕީ އިންސްޓޭންސް ހޯދުމަށް، ނުވަތަ އިނިޝިއަލައިޒް ނުކުރެވުނު ހާލަތެއްގައި އާ އެއްޗެއް އުފެއްދުމުގެ ފުރުސަތު ލިބޭ ސްޓޭޓިކް މެތޯޑެކެވެ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
އިޚްތިޔާރުތައް
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-bs-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-bs-offset=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
offset |
ނަންބަރު | 10 |
ސްކްރޯލްގެ މަޤާމު ހިސާބުކުރާއިރު މަތިން އޮފްސެޓް ކުރުމަށް ޕިކްސެލްތައް. |
method |
ސްޓްރިންގ | auto |
ސްޕައިޑް އެލިމެންޓް ހުންނަނީ ކޮން ބައެއްގައިކަން ހޯދައިފިނަމަ auto ސްކްރޯލް ކޯޑިނޭޓްސް ހޯދުމަށް އެންމެ ރަނގަޅު ގޮތް ހޮވާނެ އެވެ. ސްކްރޯލް ކޯޑިނޭޓްސް ހޯދުމަށް މެތޯޑް offset ބޭނުންކުރާނެއެވެ . ސްކްރޯލް ކޯޑިނޭޓްސް ހޯދުމަށްޓަކައި އަދި ޕްރޮޕަޓީސް ބޭނުންކުރާނެއެވެ .Element.getBoundingClientRect() position HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
ސްޓްރިންގް | ޖީކުއަރީ އޮބްޖެކްޓް | ޑީއޯއެމް އެލިމެންޓް އެވެ | ސްކްރޯލްސްޕައި ޕްލަގިން އެޕްލައި ކުރުމަށް އެލިމެންޓް ކަނޑައަޅައެވެ. |
އިވެންޓްސް
އިވެންޓް ޓައިޕް | ތަފްޞީލު |
---|---|
activate.bs.scrollspy |
މި އިވެންޓް ސްކްރޯލްސްޕީ އިން އާ އެއްޗެއް އެކްޓިވޭޓް ކުރާ ކޮންމެ ފަހަރަކު ސްކްރޯލް އެލިމެންޓަށް ފަޔަރ ކުރެއެވެ. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})