ސްކްރޯލްސްޕީ އެވެ

ވިއުޕޯޓްގައި މިހާރު އެކްޓިވް ކުރަނީ ކޮން ލިންކެއްކަން އަންގައިދިނުމަށްޓަކައި ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން ބޫޓްސްޓްރަޕް ނެވިގޭޝަން ނުވަތަ ލިސްޓް ގްރޫޕް ކޮމްޕޯނެންޓްތައް އޮޓޮމެޓިކުން އަޕްޑޭޓް ކުރެވޭނެއެވެ.

މި ޞަފްޙާގައެވެ

އެކަން ކުރާ ގޮތް

ސްކްރޯލްސްޕީ ރަނގަޅަށް މަސައްކަތް ކުރުމަށް ބޭނުންވާ މަދު ޝަރުތުތަކެއް އެބަހުއްޓެވެ:

އެއީ ބޫޓްސްޓްރެޕް ނެވް ކޮމްޕޮނެންޓެއް ނުވަތަ ލިސްޓް ގްރޫޕެއްގައި ބޭނުންކުރަން ޖެހޭނެ އެއްޗެކެވެ .
ސްކްރޯލްސްޕައި ބޭނުންވަނީ 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

އައިޓަމް 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()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	ސްޓްރިންގް \| ޖީކުއަރީ އޮބްޖެކްޓް \| ޑީއޯއެމް އެލިމެންޓް އެވެ		ސްކްރޯލްސްޕައި ޕްލަގިން އެޕްލައި ކުރުމަށް އެލިމެންޓް ކަނޑައަޅައެވެ.

އިވެންޓްސް

އިވެންޓް ޓައިޕް	ތަފްޞީލު
`activate.bs.scrollspy`	މި އިވެންޓް ސްކްރޯލްސްޕީ އިން އާ އެއްޗެއް އެކްޓިވޭޓް ކުރާ ކޮންމެ ފަހަރަކު ސްކްރޯލް އެލިމެންޓަށް ފަޔަރ ކުރެއެވެ.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

ސްކްރޯލްސްޕީ އެވެ

އެކަން ކުރާ ގޮތް

ސްކްރޯލް ކުރެވޭ ކޮންޓެއިނަރާއި ކީބޯޑަށް ވަދެވޭނެ ގޮތް ހެދުން

ނަވްބާރުގައި މިސާލު

ފުރަތަމަ ސުރުޚީ

ދެވަނަ ސުރުޚީ

ތިންވަނަ ސުރުޚީ

ހަތަރުވަނަ ސުރުޚީ

ފަސްވަނަ ސުރުޚީ

ނެސްޓްޑް ނެވް އާއެކު މިސާލު

އައިޓަމް 1

އައިޓަމް 1-1

އައިޓަމް 1-2

އައިޓަމް 2

އައިޓަމް 3

އައިޓަމް 3-1

އައިޓަމް 3-2

ލިސްޓް-ގްރޫޕް އާއެކު މިސާލު

އައިޓަމް 1

އައިޓަމް 2

އައިޓަމް 3

އައިޓަމް 4

ބޭނުން ކުރުން

ޑޭޓާ އެޓްރިބިއުޓްސް މެދުވެރިކޮށް

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް

ރިޒޮލްވް ކުރެވޭ އައިޑީ ޓާގެޓްތައް ބޭނުންވެއެވެ

ނުފެންނަ ޓާގެޓް އެލިމެންޓްތަކަށް އަޅާނުލާށެވެ

ގޮތްތައް

ރިފްރެޝް ކޮށްލާށެވެ

ނައްތާލުން

ގެޓްއިންސްޓޭންސް

ގެޓްއޯރކްރިއޭޓްއިންސްޓޭންސް

އިޚްތިޔާރުތައް

އިވެންޓްސް