ስክሮልስፒ

ኣየናይ መላግቦ ኣብዚ እዋን ኣብቲ ቪውፖርት ንጡፍ ምዃኑ ንምምልካት ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ናይ ቡትስትራፕ ምድህሳስ ወይ ዝርዝር ናይ ጉጅለ ኣካላት ብኣውቶማቲክ ምዕራፍ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

Scrollspy ነቲ .activeክፍሊ ኣብ መልህቕ ( <a>) ባእታታት ይቕይሮ እቲ ባእታ ምስቲ ብመመልከቲ's idዝተወከሰ hrefናብ ትርኢት ክሽከል ከሎ። Scrollspy ዝበለጸ ምስ Bootstrap nav component ወይ list group ተተሓሒዙ ይጥቀመሉ , ግን ምስ ዝኾነ መልህቕ ባእታታት ኣብዚ ሕጂ ዘሎ ገጽ እውን ክሰርሕ እዩ። ከመይ ከም ዝሰርሕ እንሆ።

ንምጅማር፡ ስክሮልስፒ ክልተ ነገራት የድልዮ፡ ምድህሳስ፡ ዝርዝር ጉጅለ፡ ወይ ቀሊል ስብስብ መላግቦታት፡ ተወሳኺ ስክሮልስፒ ዝግበረሉ መትሓዚ። እቲ ክሽከል ዝኽእል መትሓዚ እቲ <body>ወይ ብሕታዊ ባእታ ምስ ስብስብን heightክኸውን ይኽእል overflow-y: scroll.
ኣብቲ ክሽከል ዝኽእል መትሓዚ፡ ወስኸሉን ኣበይ data-bs-spy="scroll"እዩ እቲ ፍሉይ ናይቲ ተዛማዲ ምድህሳስ። ንመእተዊ ቁልፊ ሰሌዳ ንምርግጋጽ a እውን ምእታውካ ኣረጋግጽ ።data-bs-target="#navId"navIdidtabindex="0"
ነቲ “spied” ዝበሃል መትሓዚ ክትስክሮል ከለኻ፡ ኣብ .activeውሽጢ እቲ ተዛማዲ ምድህሳስ ካብ ዝርከቡ መልህቕ መላግቦታት ሓደ ክፍሊ ይውሰኽን ይእለን። ሊንክታት ዝፍታሕ idዕላማታት ክህልዎም ኣለዎ፣ እንተዘይኮይኑ ዕሽሽ ይበሃሉ። ንኣብነት a <a href="#home">home</a>ምስ ገለ ኣብ DOM ከም ዝሰማማዕ ክሰማማዕ ኣለዎ።<div id="home"></div>
ዘይርኣዩ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ክበሃሉ እዮም። ኣብ ታሕቲ ንዘይርኣዩ ባእታታት ዝብል ክፍሊ ርአ።

ኣብነታት

ኣብ ትሕቲ navbar ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ። ነቲ ንቑልቁል ዝወርድ ዝርዝር ከፊትካ እቶም ንቑልቁል ዝወርድ ነገራት እውን ክድምቕ ርአ።

ቀዳማይ ኣርእስቲ

እዚ ገለ ናይ ቦታ ትሕዝቶ ናይቲ 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>

ዝተሰነየ nav

Scrollspy ምስ nested .navs እውን ይሰርሕ እዩ። ሓደ ሰፈር እንተኾይኑ .navወለዱ .active’ ውን ክኾኑ እዮም .active። ኣብ ጥቓ navbar ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ።

ነጥቢ 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-groups እውን ይሰርሕ እዩ። ኣብ ጥቓ እቲ ዝርዝር ጉጅለ ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ።

ነጥቢ 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 ኣብ nav componentsን list groupsን ጥራይ ዝተሓጽረ ኣይኮነን፣ ስለዚ <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>

ዘይርኣዩ ባእታታት

ዘይርኣዩ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ክበሃሉ እዮም፡ ተዛመድቲ nav ነገራት ድማ .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 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

ሽም	ዓይነት	ትሑዝ	መግለፂ
`rootMargin`	ገመድ	`0px 0px -25%`	Intersection Observer rootMargin ቅኑዓት ኣሃዱታት፣ ኣብ ዝሕሰብሉ እዋን ናይ ስክሮል ቦታ።
`smoothScroll`	ቡልያን ዝብል እዩ።	`false`	ሓደ ተጠቃሚ ኣብ ScrollSpy observables ዝውከስ መላግቦ ምስ ዝጥውቕ ስሉጥ ምዝዋር የኽእል።
`target`	ሕብረ ቃላት፣ DOM ባእታ	`null`	Scrollspy ፕላግ-ኢን ንምትግባር ባእታ ይገልጽ።
`threshold`	ስርርዕ	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, ኣብ ዝሕሰብሉ እዋን ናይ ስክሮል ቦታ።

ካብ ግዜ ወጻኢ ዝኾኑ ኣማራጺታት

ክሳብ v5.1.3 offset& methodoptions ንጥቀም ኔርና፣ ሕጂ ካብ ስራሕ ወጻኢ ኮይኑ ብ rootMargin. offsetንድሕሪት ዝምጥን ምትእስሳር ንምዕቃብ፡ ንዝተዋህበ ናብ ምትንታን ክንቅጽል ኢና ፡ እዚ ባህሪ ግን ኣብ v6rootMargin ክእለ እዩ ።

ኣገባባት

ሜላ	መግለፂ
`dispose`	ናይ ሓደ ባእታ ስክሮልስፒ የጥፍኦ። (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)
`getInstance`	ምስ ሓደ DOM ባእታ ዝተኣሳሰር scrollspy instance ንምርካብ ስታትቲክ ሜላ።
`getOrCreateInstance`	ስታትቲክ ሜላ ነቲ scrollspy instance ምስ DOM element ዝተኣሳሰር ንምርካብ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ንምፍጣር።
`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...
})

ስክሮልስፒ

ከመይ ይሰርሕ

ኣብነታት

ናቭባር

ቀዳማይ ኣርእስቲ

ካልኣይ ኣርእስቲ

ሳልሳይ ርእሲ

ራብዓይ ርእሲ

ሓሙሻይ ርእሲ

ዝተሰነየ nav

ነጥቢ 1

ቁጽሪ 1-1

ቁጽሪ 1-2

ቁጽሪ 2

ቁጽሪ 3

ቁጽሪ 3-1

ቁጽሪ 3-2

ዝርዝር ጉጅለ

ነጥቢ 1

ቁጽሪ 2

ቁጽሪ 3

ነጥቢ 4

ቀለልቲ መልህቕ

ነጥቢ 1

ቁጽሪ 2

ቁጽሪ 3

ነጥቢ 4

ነጥቢ 5

ዘይርኣዩ ባእታታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ብመንገዲ ጃቫስክሪፕት።

ኣማራጺታት

ኣገባባት

ፍጻሜታት