ସ୍କ୍ରୋଲ୍ସପି |
ଭ୍ୟୁପୋର୍ଟରେ କେଉଁ ଲିଙ୍କ୍ ସକ୍ରିୟ ଅଛି ତାହା ସୂଚାଇବା ପାଇଁ ସ୍କ୍ରୋଲ୍ ସ୍ଥିତିକୁ ଆଧାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ନେଭିଗେସନ୍ କିମ୍ବା ତାଲିକା ଗୋଷ୍ଠୀ ଉପାଦାନଗୁଡ଼ିକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଅଦ୍ୟତନ କରନ୍ତୁ |
ଏହା କିପରି କାମ କରେ |
ସଠିକ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ସ୍କ୍ରୋଲ୍ସପିର କିଛି ଆବଶ୍ୟକତା ଅଛି:
- ଏହା ଏକ ବୁଟଷ୍ଟ୍ରାପ୍ ନାଭ୍ ଉପାଦାନ କିମ୍ବା ତାଲିକା ଗୋଷ୍ଠୀରେ ବ୍ୟବହୃତ ହେବା ଜରୁରୀ |
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>
ନଷ୍ଟ ହୋଇଥିବା ନାଭ ସହିତ ଉଦାହରଣ |
ସ୍କ୍ରୋଲ୍ସପି ମଧ୍ୟ ନେଷ୍ଟେଡ୍ .nav
s ସହିତ କାମ କରେ | ଯଦି ଏକ ବସା ବାନ୍ଧେ .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
s ସହିତ କାମ କରେ | ତାଲିକା ଗୋଷ୍ଠୀ ପାଖରେ ଥିବା କ୍ଷେତ୍ରକୁ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ ଏବଂ ସକ୍ରିୟ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ଦେଖନ୍ତୁ |
ଆଇଟମ୍ 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() position HTMLElement.offsetTop HTMLElement.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...
})