Scrollspy

မည်သည့်လင့်ခ်သည် မြင်ကွင်းပို့တ်တွင် လက်ရှိအသုံးပြုနေကြောင်းညွှန်ပြရန်အတွက် လှိမ့်အနေအထားပေါ်အခြေခံ၍ Bootstrap လမ်းညွှန်မှု သို့မဟုတ် အုပ်စုအစိတ်အပိုင်းများကို စာရင်းပြုစုပါ။

ဤစာမျက်နှာတွင်

ဘယ်လိုအလုပ်လုပ်လဲ

Scrollspy တွင် ကောင်းမွန်စွာလုပ်ဆောင်ရန် လိုအပ်ချက်အချို့ရှိသည်။

၎င်းကို Bootstrap nav အစိတ်အပိုင်း သို့မဟုတ် စာရင်းအုပ်စု တွင် အသုံးပြုရပါမည် ။
Scrollspy သည် position: relative;သင်သူလျှိုလုပ်နေသော ဒြပ်စင်ပေါ်တွင် လိုအပ်သည်၊ များသောအားဖြင့် <body>.
Anchors ( <a>) လိုအပ်ပြီး ၎င်းနှင့်အတူ အစိတ်အပိုင်းတစ်ခုကို ညွှန်ပေးရပါမည် id။

.activeအောင်မြင်စွာ အကောင်အထည် ဖော်သောအခါ၊ သင်၏ လမ်းကြောင်း သို့မဟုတ် စာရင်းအုပ်စု သည် ၎င်းတို့၏ ဆက်စပ်ပစ်မှတ်များကို အခြေခံ၍ အတန်းကို အကြောင်းအရာတစ်ခုမှ နောက်တစ်ခု သို့ ရွှေ့ကာ အလိုက်သင့် အပ်ဒိတ်လုပ်ပါမည် ။

ရွှေ့နိုင်သော ကွန်တိန်နာများနှင့် ကီးဘုတ် အသုံးပြုခွင့်

အကယ်၍ သင်သည် လှိမ့်နိုင်သော ကွန်တိန်နာ (အခြားအရာမှလွဲ၍ <body>) ပြုလုပ်နေပါက ကီးဘုတ်အသုံးပြုခွင့်ကိုသေချာစေရန် ကီးဘုတ် တစ်ခုနှင့်အတူ ၎င်းကိုအသုံးပြုရန် heightသတ်မှတ်ထားကြောင်း သေချာပါစေ။overflow-y: scroll;tabindex="0"

navbar အောက်ရှိ ဧရိယာကို ရွှေ့ပြီး တက်ကြွသော အတန်းပြေ��င်းလဲမှုကို ကြည့်ရှုပါ။ dropdown items များကိုလည်း မီးမောင်းထိုးပြပါမည်။

ပထမခေါင်းစဉ်

ဤသည်မှာ scrollspy စာမျက်နှာအတွက် နေရာယူထားသော အကြောင်းအရာအချို့ဖြစ်သည်။ စာမျက်နှာအောက်သို့ ဆင်းသွားသည့်အခါ သင့်လျော်သော လမ်းညွှန်လင့်ခ်ကို မီးမောင်းထိုးပြထားကြောင်း သတိပြုပါ။ အစိတ်အပိုင်း ဥပမာတစ်ခုလုံးကို ထပ်ခါတလဲလဲ ပြုလုပ်ထားသည်။ လှိမ့်ခြင်းနှင့် မီးမောင်းထိုးပြခြင်းတို့ကို အလေးထားရန် ဤနေရာတွင် နမူနာကော်ပီအချို့ကို ဆက်လက်ထည့်သွင်းထားပါသည်။

ဒုတိယခေါင်းစဉ်

တတိယခေါင်းစဉ်

စတုတ္ထခေါင်းစဉ်

ပဉ္စမ ခေါင်းစဉ်

<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>

nested nav ဖြင့် ဥပမာ

Scrollspy သည် nested .navs နှင့်လည်းအလုပ်လုပ်သည်။ အသိုက်တစ်ခုရှိလျှင် .nav၎င်း၏ .activeမိဘများလည်း ရှိလိမ့်မည် .active။ navbar ဘေးရှိ ဧရိယာကို ရွှေ့ပြီး တက်ကြွသော အတန်းပြောင်းလဲမှုကို ကြည့်ရှုပါ။

ပစ္စည်း ၁

အကြောင်းအရာ ၁-၁

အကြောင်းအရာ ၁-၂

ပစ္စည်း ၂

အကြောင်းအရာ ၃

အကြောင်းအရာ ၃-၁

အကြောင်းအရာ ၃-၂

<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>

စာရင်းအုပ်စုနှင့် ဥပမာ

Scrollspy သည် s နှင့်လည်းအလုပ်လုပ်သည် .list-group။ စာရင်းအုပ်စုဘေးရှိ ဧရိယာကို ရွှေ့ပြီး တက်ကြွသော အတန်းပြောင်းလဲမှုကို ကြည့်ရှုပါ။

ပစ္စည်း ၁ ပစ္စည်း ၂ အကြောင်းအရာ ၃ ပစ္စည်း ၄

ပစ္စည်း ၁

ပစ္စည်း ၂

အကြောင်းအရာ ၃

ပစ္စည်း ၄

<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>

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

သင်၏ topbar လမ်းညွှန်မှုတွင် scrollspy အပြုအမူကို အလွယ်တကူထည့်ရန်၊ သင် data-bs-spy="scroll"စူးစမ်းလိုသောဒြပ်စင်သို့ ထည့်ပါ (ပုံမှန်အားဖြင့် ၎င်းသည် အများစုဖြစ်မည် <body>)။ ထို့နောက် data-bs-targetမည်သည့် Bootstrap အစိတ်အပိုင်း၏ ပင်မဒြပ်စင် 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>

JavaScript မှတဆင့်

သင်၏ CSS တွင် ထည့်သွင်းပြီးနောက် position: relative;၊ JavaScript မှတဆင့် scrollspy ကိုခေါ်ဆိုပါ-

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

ဖြေရှင်းနိုင်သော ID ပစ်မှတ်များ လိုအပ်သည်။

Navbar လင့်ခ်များတွင် ဖြေရှင်းနိုင်သော id ပစ်မှတ်များ ရှိရပါမည်။ ဥပမာအားဖြင့်၊ <a href="#home">home</a>DOM ကဲ့သို့သော အရာတစ်ခုနှင့် ကိုက်ညီရမည် <div id="home"></div>။

မမြင်နိုင်သော ပစ်မှတ် အစိတ်အပိုင်းများကို လျစ်လျူရှုထားသည်။

မမြင်နိုင်သော ပစ်မှတ်များကို လျစ်လျူရှုမည်ဖြစ်ပြီး ၎င်းတို့၏ သက်ဆိုင်ရာ nav ပစ္စည်းများကို မည်သည့်အခါမှ မီးမောင်းထိုးပြမည်မဟုတ်ပါ။

နည်းလမ်းများ

ပြန်လည်ဆန်းသစ်ပါ။

DOM မှဒြပ်စင်များထည့်ခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းနှင့်အတူ scrollspy ကိုအသုံးပြုသောအခါ၊ သင်သည်ထိုကဲ့သို့သောပြန်လည်ဆန်းသစ်သည့်နည်းလမ်းကိုခေါ်ဆိုရန် လိုအပ်သည်-

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

စွန့်ပစ်ပါ။

ဒြပ်စင်တစ်ခု၏ scrollspy ကိုဖျက်ပါ။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)

getInstance

DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်သော scrollspy instance ကိုရရှိရန်ခွင့်ပြုသည့် Static နည်းလမ်း

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသည့် scrollspy instance ကို ရယူရန် ခွင့်ပြုသည့် Static method သည် ၎င်းကို စတင်မလုပ်ဆောင်ပါက အသစ်တစ်ခုကို ဖန်တီးပါ။

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

ရွေးချယ်မှုများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-offset=""။

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
`offset`	နံပါတ်	`10`	scroll ၏ အနေအထားကို တွက်ချက်သောအခါ အပေါ်မှ ထေမိရန် pixels များ။
`method`	ကြိုးတစ်ချောင်း	`auto`	မည်သည့်အပိုင်းတွင် လျှိုလျှိုဒြပ်စင် ပါရှိသည်ကို ရှာ `auto`ပါ။ scroll coordinates များရယူရန် အကောင်းဆုံးနည်းလမ်းကို ရွေးချယ်ပါမည်။ scroll coordinates ရယူရန် နည်းလမ်းကို `offset`အသုံးပြုပါမည် ။ scroll ကိုသြဒိနိတ်များရယူရန် နှင့် properties ကို သုံးပါမည် ။`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	string \| jQuery object \| DOM ဒြပ်စင်		Scrollspy ပလပ်အင်ကို အသုံးပြုရန် အစိတ်အပိုင်းကို သတ်မှတ်သည်။

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား	ဖော်ပြချက်
`activate.bs.scrollspy`	scrollspy မှ အကြောင်းအရာအသစ်တစ်ခု အသက်ဝင်လာသည့်အခါတိုင်း ဤဖြစ်ရပ်သည် လှိမ့်ဒြပ်ပေါ်တွင် မီးလောင်ပါသည်။

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

Scrollspy

ဘယ်လိုအလုပ်လုပ်လဲ

ရွှေ့နိုင်သော ကွန်တိန်နာများနှင့် ကီးဘုတ် အသုံးပြုခွင့်

navbar တွင်ဥပမာ

ပထမခေါင်းစဉ်

ဒုတိယခေါင်းစဉ်

တတိယခေါင်းစဉ်

စတုတ္ထခေါင်းစဉ်

ပဉ္စမ ခေါင်းစဉ်

nested nav ဖြင့် ဥပမာ

ပစ္စည်း ၁

အကြောင်းအရာ ၁-၁

အကြောင်းအရာ ၁-၂

ပစ္စည်း ၂

အကြောင်းအရာ ၃

အကြောင်းအရာ ၃-၁

အကြောင်းအရာ ၃-၂

စာရင်းအုပ်စုနှင့် ဥပမာ

ပစ္စည်း ၁

ပစ္စည်း ၂

အကြောင်းအရာ ၃

ပစ္စည်း ၄

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

ဖြေရှင်းနိုင်သော ID ပစ်မှတ်များ လိုအပ်သည်။

မမြင်နိုင်သော ပစ်မှတ် အစိတ်အပိုင်းများကို လျစ်လျူရှုထားသည်။

နည်းလမ်းများ

ပြန်လည်ဆန်းသစ်ပါ။

စွန့်ပစ်ပါ။

getInstance

getOrCreateInstance

ရွေးချယ်မှုများ

အဲ့ဒါနဲ့