ସ୍କ୍ରୋଲ୍ସପି |

ଭ୍ୟୁପୋର୍ଟରେ କେଉଁ ଲିଙ୍କ୍ ସକ୍ରିୟ ଅଛି ତାହା ସୂଚାଇବା ପାଇଁ ସ୍କ୍ରୋଲ୍ ସ୍ଥିତିକୁ ଆଧାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ନେଭିଗେସନ୍ କିମ୍ବା ତାଲିକା ଗୋଷ୍ଠୀ ଉପାଦାନଗୁଡ଼ିକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଅଦ୍ୟତନ କରନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ଏହା କିପରି କାମ କରେ |

ସଠିକ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ସ୍କ୍ରୋଲ୍ସପିର କିଛି ଆବଶ୍ୟକତା ଅଛି:

ଏହା ଏକ ବୁଟଷ୍ଟ୍ରାପ୍ ନାଭ୍ ଉପାଦାନ କିମ୍ବା ତାଲିକା ଗୋଷ୍ଠୀରେ ବ୍ୟବହୃତ ହେବା ଜରୁରୀ |
position: relative;ଆପଣ ଅନୁସନ୍ଧାନ କରୁଥିବା ଉପାଦାନ ଉପରେ ସ୍କ୍ରୋଲ୍ସପି ଆବଶ୍ୟକ କରେ , ସାଧାରଣତ <body>। |
ଆଙ୍କର୍ ( <a>) ଆବଶ୍ୟକ ଏବଂ ଏହା ସହିତ ଏକ ଉପାଦାନକୁ ସୂଚିତ କରିବା ଜରୁରୀ id|

ଯେତେବେଳେ ସଫଳତାର ସହିତ କାର୍ଯ୍ୟକାରୀ ହୁଏ, ତୁମର ନାଭ କିମ୍ବା ତାଲିକା ଗୋଷ୍ଠୀ ସେହି ଅନୁଯାୟୀ ଅପଡେଟ୍ ହେବ, .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>

ନଷ୍ଟ ହୋଇଥିବା ନାଭ ସହିତ ଉଦାହରଣ |

ସ୍କ୍ରୋଲ୍ସପି ମଧ୍ୟ ନେଷ୍ଟେଡ୍ .navs ସହିତ କାମ କରେ | ଯଦି ଏକ ବସା ବାନ୍ଧେ .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-groups ସହିତ କାମ କରେ | ତାଲିକା ଗୋଷ୍ଠୀ ପାଖରେ ଥିବା କ୍ଷେତ୍ରକୁ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ ଏବଂ ସକ୍ରିୟ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ଦେଖନ୍ତୁ |

ଆଇଟମ୍ 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"ତୁମେ ଗୁପ୍ତଚର କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନକୁ ଯୋଗ କର (ସାଧାରଣତ this ଏହା ହେବ <body>) | ତା’ପରେ data-bs-targetଯେକ any ଣସି ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନର ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର 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>

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ଆପଣଙ୍କର CSS ରେ ଯୋଡିବା ପରେ position: relative;, ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସ୍କ୍ରୋଲସପି କୁ କଲ୍ କରନ୍ତୁ:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

ସମାଧାନ ଯୋଗ୍ୟ ID ଲକ୍ଷ୍ୟଗୁଡ଼ିକ ଆବଶ୍ୟକ |

ନାଭବାର୍ ଲିଙ୍କଗୁଡ଼ିକରେ ସମାଧାନଯୋଗ୍ୟ 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

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-ଯେପରି ଯୋଡନ୍ତୁ data-bs-offset=""|

ନାମ	ଟାଇପ୍ କରନ୍ତୁ \|	ଡିଫଲ୍ଟ \|	ବର୍ଣ୍ଣନା
`offset`	ସଂଖ୍ୟା	`10`	ସ୍କ୍ରୋଲର ସ୍ଥିତି ଗଣନା କରିବା ସମୟରେ ଉପରୁ ଅଫସେଟ କରିବାକୁ ପିକ୍ସେଲ \|
`method`	ଷ୍ଟ୍ରିଙ୍ଗ୍	`auto`	ଗୁପ୍ତଚର ଉପାଦାନ କେଉଁ ବିଭାଗରେ ଅଛି ତାହା ଖୋଜ \| `auto`ସ୍କ୍ରୋଲ୍ କୋର୍ଡିନେଟ୍ ପାଇବା ପାଇଁ ସର୍ବୋତ୍ତମ ପଦ୍ଧତି ବାଛିବ \| ସ୍କ୍ରୋଲ୍ କୋର୍ଡିନେଟ୍ ପାଇବା `offset`ପାଇଁ ପଦ୍ଧତି ବ୍ୟବହାର କରିବ \| ସ୍କ୍ରୋଲ୍ କୋର୍ଡିନେଟ୍ ପାଇବା ପାଇଁ ଏବଂ ଗୁଣଗୁଡିକ ବ୍ୟବହାର କରିବ \|`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	string \| jQuery ବସ୍ତୁ \| DOM ଉପାଦାନ \|		Scrollspy ପ୍ଲଗଇନ୍ ପ୍ରୟୋଗ କରିବାକୁ ଉପାଦାନ ନିର୍ଦ୍ଦିଷ୍ଟ କରେ \|

ଘଟଣା

ଇଭେଣ୍ଟ ପ୍ରକାର \|	ବର୍ଣ୍ଣନା
`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

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସମାଧାନ ଯୋଗ୍ୟ ID ଲକ୍ଷ୍ୟଗୁଡ଼ିକ ଆବଶ୍ୟକ |

ଅଦୃଶ୍ୟ ଲକ୍ଷ୍ୟ ଉପାଦାନଗୁଡିକ ଅଣଦେଖା |

ପ୍ରଣାଳୀ

ସତେଜ କରନ୍ତୁ |

ନିଷ୍କାସନ କରନ୍ତୁ |

getInstance

getOrCreateInstance

ବିକଳ୍ପଗୁଡ଼ିକ

ଘଟଣା