ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

Scrollspy

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

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

Scrollspy በትክክል ለመስራት ጥቂት መስፈርቶች አሉት።

  • በ Bootstrap nav አካል ወይም ዝርዝር ቡድን ላይ ጥቅም ላይ መዋል አለበት .
  • Scrollspy በሚሰልሉበት position: relative;ኤለመንት ላይ ይጠይቃል፣ አብዛኛውን ጊዜ የ <body>.
  • መልህቆች ( <a>) ያስፈልጋሉ እና ከዚያ ጋር ወደ አንድ አካል መጠቆም አለባቸው id።

በተሳካ ሁኔታ ሲተገበር የእርስዎ ናቭ ወይም የዝርዝር ቡድን .activeበተዛማጅ ዒላማዎቻቸው ላይ በመመስረት ክፍሉን ከአንድ ንጥል ወደ ቀጣዩ ያንቀሳቅሳል።

ሊሸበለሉ የሚችሉ መያዣዎች እና የቁልፍ ሰሌዳ መዳረሻ

ሊጠቀለል የሚችል ኮንቴይነር እየሰሩ ከሆነ (ከዚህ ውጪ <body>)፣ heightስብስብ እንዳለዎት እርግጠኛ ይሁኑ እና በእሱ ላይ መተግበሩን ያረጋግጡ overflow-y: scroll;- ከ አንድ ጎን ለጎን tabindex="0"የቁልፍ ሰሌዳ መዳረሻ።

ምሳሌ በ navbar ውስጥ

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

የመጀመሪያ ርዕስ

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

ሁለተኛ ርዕስ

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

ሦስተኛው ርዕስ

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

አራተኛው ርዕስ

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

አምስተኛው ርዕስ

ይህ ለ 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>

ለምሳሌ ከጎጆው ጋር

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

ንጥል 1

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

ንጥል 1-1

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

ንጥል 1-2

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

ንጥል 2

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

ንጥል 3

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

ንጥል 3-1

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

ንጥል 3-2

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

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

ንጥል 1

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

ንጥል 2

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

ንጥል 3

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

ንጥል 4

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

<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"ለመሰለል ወደሚፈልጉት አካል ያክሉ (በተለምዶ ይሄ ነው <body>)። ከዚያ data-bs-targetባህሪውን ከማንኛውም የቡትስትራፕ .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>

በጃቫስክሪፕት በኩል

በእርስዎ ሲኤስኤስ ውስጥ ካከሉ በኋላ position: relative;፣ በጃቫስክሪፕት ወደ ጥቅልል ​​ስፓይ ይደውሉ

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

ሊፈቱ የሚችሉ መታወቂያዎች ያስፈልጋሉ።

የናቭባር አገናኞች ሊፈቱ የሚችሉ የመታወቂያ ኢላማዎች ሊኖራቸው ይገባል። ለምሳሌ፣ አንድ <a href="#home">home</a>በ DOM ውስጥ ካለ ነገር ጋር መዛመድ አለበት እንደ <div id="home"></div>.

የማይታዩ ኢላማ አካላት ችላ ተብለዋል።

የማይታዩ የዒላማ ክፍሎች ችላ ይባላሉ እና የእነሱ ተዛማጅ የባህር ኃይል ዕቃዎች በጭራሽ አይደምቁም።

ዘዴዎች

ማደስ

ከ DOM አባሎችን ከመጨመር ወይም ከማስወገድ ጋር በማጣመር scrollspy ን ሲጠቀሙ የማደስ ዘዴውን እንደሚከተለው መደወል ያስፈልግዎታል፡-

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 ሕብረቁምፊ | jQuery ነገር | DOM አባል Scrollspy ፕለጊን የሚተገበር አካልን ይገልጻል።

ክስተቶች

የክስተት አይነት መግለጫ
activate.bs.scrollspy ይህ ክስተት አዲስ ንጥል በጥቅል ስፓይ ሲነቃ በጥቅል ኤለመንቱ ላይ ይቃጠላል። 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})