Scrollspy

የቡትስትራፕ አሰሳን በራስ-ሰር አዘምን ወይም የቡድን ክፍሎችን በማሸብለል ቦታ ላይ በመመስረት በመመልከቻው ውስጥ የትኛው ማገናኛ እንደሚሰራ ለማመልከት ይዘርዝሩ።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

Scrollspy በመልህቁ የተጠቀሰው ንጥረ ነገር ወደ እይታ ሲሸብልል ክፍሉን በመልህቅ .active( <a>) ኤለመንቶች ላይ ይቀየራል። Scrollspy ከ Bootstrap nav አካል ወይም የዝርዝር ቡድን ጋር በጥምረት መጠቀም የተሻለ ነው ፣ነገር ግን አሁን ባለው ገጽ ላይ ካሉ ማንኛቸውም መልህቅ አባሎች ጋርም ይሰራል። እንዴት እንደሚሰራ እነሆ።idhref

ለመጀመር፣ scrollspy ሁለት ነገሮችን ይፈልጋል፡ አሰሳ፣ የዝርዝር ቡድን፣ ወይም ቀላል የአገናኞች ስብስብ፣ እና ሊሽከረከር የሚችል መያዣ። ሊሽከረከር የሚችል መያዣ ከስብስብ እና <body>ጋር ብጁ አካል ሊሆን ይችላል ።heightoverflow-y: scroll
በተጠቀለለ መያዣው ላይ አክል data-bs-spy="scroll"እና data-bs-target="#navId"የት ነው የተጎዳኘው አሰሳ navIdልዩ የሆነው። የቁልፍ ሰሌዳ መዳረሻን ለማረጋገጥ idበተጨማሪ ማካተትዎን ያረጋግጡ ።tabindex="0"
የ"ስፓይድ" መያዣውን ሲያሸብልሉ፣ አንድ .activeክፍል ተጨምሯል እና ከተዛማጅ አሰሳ ውስጥ ካለው መልህቅ አገናኞች ይወገዳል። አገናኞች ሊፈቱ የሚችሉ ኢላማዎች ሊኖራቸው ይገባል id፣ አለበለዚያ ችላ ይባላሉ። ለምሳሌ፣ አንድ <a href="#home">home</a>በ DOM ውስጥ ካለ ነገር ጋር መዛመድ አለበት።<div id="home"></div>
የማይታዩ የዒላማ አካላት ችላ ይባላሉ። ከታች ያለውን የማይታዩ ንጥረ ነገሮች ክፍል ይመልከቱ።

ምሳሌዎች

ከአሳሹ በታች ያለውን ቦታ ያሸብልሉ እና የነቃ ክፍል ለውጥ ይመልከቱ። የተቆልቋይ ምናሌውን ይክፈቱ እና የተቆልቋይ ንጥሎችም ሲደመቁ ይመልከቱ።

የመጀመሪያ ርዕስ

ይህ ለ scrollspy ገጽ የተወሰነ ቦታ ያዥ ነው። ገጹን ወደ ታች ሲያሸብልሉ ትክክለኛው የአሰሳ ማገናኛ ጎልቶ ይታያል። በክፍል ምሳሌ ውስጥ ተደጋግሟል። ማሸብለል እና ማጉላት ላይ ለማጉላት አንዳንድ ተጨማሪ የምሳሌ ቅጂ እዚህ ማከል እንቀጥላለን።

ሁለተኛ ርዕስ

ሦስተኛው ርዕስ

አራተኛው ርዕስ

አምስተኛው ርዕስ

<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

ናቭ

.navScrollspy እንዲሁ ከጎጆ s ጋር ይሰራል ። .navጎጆ ከሆነ .activeወላጆቹም ይሆናሉ .active። ከአሳሹ ቀጥሎ ያለውን ቦታ ያሸብልሉ እና የነቃውን የክፍል ለውጥ ይመልከቱ።

ንጥል 1

የጃቫስክሪፕት ፕለጊን ሊታዩ ከሚችሉት መካከል ትክክለኛውን አካል ለመምረጥ እንደሚሞክር ያስታውሱ። በተመሳሳይ ጊዜ የሚታዩ በርካታ የማሸብለል ዒላማዎች አንዳንድ ችግሮችን ሊያስከትሉ ይችላሉ።

ንጥል 1-1

ንጥል 1-2

ንጥል 2

ንጥል 3

ንጥል 3-1

ንጥል 3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

የዝርዝር ቡድን

.list-groupScrollspy ከ s ጋርም ይሰራል ። ከዝርዝሩ ቡድን ቀጥሎ ያለውን ቦታ ያሸብልሉ እና የነቃውን ክፍል ለውጥ ይመልከቱ።

ንጥል 1 ንጥል 2 ንጥል 3 ንጥል 4

ንጥል 1

ንጥል 2

ንጥል 3

ንጥል 4

<div class="row">
  <div class="col-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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

ቀላል መልህቆች

Scrollspy በናቭ ክፍሎች እና ዝርዝር ቡድኖች ላይ ብቻ የተገደበ አይደለም፣ ስለዚህ <a>አሁን ባለው ሰነድ ውስጥ በማንኛውም መልህቅ አካላት ላይ ይሰራል። አካባቢውን ያሸብልሉ እና .activeየክፍሉን ለውጥ ይመልከቱ።

ንጥል 1 ንጥል 2 ንጥል 3 ንጥል 4 ንጥል 5

ንጥል 1

ንጥል 2

ንጥል 3

ንጥል 4

ንጥል 5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

የማይታዩ ንጥረ ነገሮች

የማይታዩ የዒላማ ክፍሎች ችላ ይባላሉ እና የእነሱ ተዛማጅ የባህር ኃይል ዕቃዎች ክፍል አይቀበሉም .active። በማይታይ መጠቅለያ ውስጥ የተጀመሩ የማሸብሸብ አጋጣሚዎች ሁሉንም የታለሙ ንጥረ ነገሮችን ችላ ይላሉ። refreshመጠቅለያው ከታየ በኋላ የሚታዩ ክፍሎችን ለመፈተሽ ዘዴውን ይጠቀሙ ።

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

አጠቃቀም

በውሂብ ባህሪያት በኩል

በቀላሉ የማሸብለል ባህሪን ወደ ላይኛው አሞሌ አሰሳ ለመጨመር፣ data-bs-spy="scroll"ለመሰለል ወደሚፈልጉት አካል ያክሉ (በተለምዶ ይሄ ነው <body>)። ከዚያ የማንኛውም የቡትስትራፕ አካል የወላጅ አባል ባህሪውን በክፍል ወይም በክፍል data-bs-targetያክሉ ።id.nav

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

በጃቫስክሪፕት በኩል

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

አማራጮች

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። data-bs-configአንድ ኤለመንት ሲኖረው data-bs-config='{"delay":0, "title":123}'እና data-bs-title="456"ባህሪያቱ ሲኖረው፣ የመጨረሻው titleእሴት ይሆናል 456እና የተለዩ የውሂብ ባህሪያት በ ላይ የተሰጡ እሴቶችን ይሽራሉ data-bs-config። በተጨማሪም፣ ነባር የውሂብ ባህሪያት እንደ JSON ያሉ እሴቶችን ማኖር ይችላሉ data-bs-delay='{"show":0,"hide":150}'።

ስም	ዓይነት	ነባሪ	መግለጫ
`rootMargin`	ሕብረቁምፊ	`0px 0px -25%`	የኢንተርሴክሽን ታዛቢ rootMargin ትክክለኛ አሃዶች፣ የማሸብለል ቦታን ሲያሰሉ
`smoothScroll`	ቡሊያን	`false`	አንድ ተጠቃሚ ScrollSpy observablesን የሚያመለክት አገናኝ ላይ ጠቅ ሲያደርግ ለስላሳ ማሸብለል ያስችላል።
`target`	ሕብረቁምፊ፣ DOM አባል	`null`	Scrollspy ፕለጊን የሚተገበር አካልን ይገልጻል።
`threshold`	ድርድር	`[0.1, 0.5, 1]`	`IntersectionObserver` የገደብ ትክክለኛ ግቤት፣ የማሸብለል ቦታን ሲያሰላ።

የተቋረጡ አማራጮች

እስከ v5.1.3 ድረስ እየተጠቀምን ነበር offset& methodአማራጮች , አሁን ተቋርጠዋል እና ተተክተዋል rootMargin. offsetየኋሊት ተኳኋኝነትን ለመጠበቅ ፣ የተሰጠውን መተንተን እንቀጥላለን ፣ ነገር ግን ይህ ባህሪ በ v6rootMargin ውስጥ ይወገዳል ።

ዘዴዎች

ዘዴ	መግለጫ
`dispose`	የአንድ ንጥረ ነገር ጥቅልል ስፓይ ያጠፋል። (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል)
`getInstance`	ከDOM ኤለመንት ጋር የተገናኘውን የማሸብለል ስፓይ ምሳሌ ለማግኘት የማይንቀሳቀስ ዘዴ።
`getOrCreateInstance`	ከDOM ኤለመንት ጋር የተገናኘውን የማሸብለል ስፓይ ምሳሌ ለማግኘት ወይም ካልተጀመረ አዲስ ለመፍጠር የማይንቀሳቀስ ዘዴ።
`refresh`	በDOM ውስጥ ክፍሎችን ሲጨምሩ ወይም ሲያስወግዱ የማደስ ዘዴውን መደወል ያስፈልግዎታል።

የማደስ ዘዴን በመጠቀም ምሳሌ ይኸውና፡

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

ክስተቶች

ክስተት	መግለጫ
`activate.bs.scrollspy`	ይህ ክስተት መልህቅ በጥቅል ስፓይ ሲነቃ በጥቅል ኤለመንት ላይ ይቃጠላል።

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

Scrollspy

እንዴት እንደሚሰራ

ምሳሌዎች

ናቭባር

የመጀመሪያ ርዕስ

ሁለተኛ ርዕስ

ሦስተኛው ርዕስ

አራተኛው ርዕስ

አምስተኛው ርዕስ

ናቭ

ንጥል 1

ንጥል 1-1

ንጥል 1-2

ንጥል 2

ንጥል 3

ንጥል 3-1

ንጥል 3-2

የዝርዝር ቡድን

ንጥል 1

ንጥል 2

ንጥል 3

ንጥል 4

ቀላል መልህቆች

ንጥል 1

ንጥል 2

ንጥል 3

ንጥል 4

ንጥል 5

የማይታዩ ንጥረ ነገሮች

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

አማራጮች

ዘዴዎች

ክስተቶች