ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ስክሮልስፒ

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

ኣብዚ ገጽ

ከመይ ይሰርሕ

ስክሮልስፒ ብግቡእ ንኽሰርሕ ገለ ረቛሒታት ኣለዎ፤

  • ኣብ Bootstrap nav component ወይ list group ክጥቀም ኣለዎ ።
  • Scrollspy position: relative;ኣብቲ ትስልዮ ዘለኻ ባእታ ይሓትት፣ መብዛሕትኡ ግዜ እቲ <body>.
  • መልህቕ ( <a>) የድልዩን ምስኡ ናብ ሓደ ባእታ ከመልክቱ ኣለዎም id።

ብዓወት ምስ ተተግበረ፡ ናትካ nav ወይ list group ብኡ መሰረት ክመሓየሽ እዩ፡ ነቲ .activeክፍሊ ካብ ሓደ ኣቕሓ ናብቲ ዝቕጽል ነገራት ብመሰረት ተዛመድቲ ዕላማታቶም ከሰጋግሮ እዩ።

ስክሮል ዝግበረሎም መትሓዚታትን መእተዊ ቁልፊ ሰሌዳን

ንኽትሽክርከር ዝኽእል መትሓዚ ትሰርሕ እንተኾንካ (ካብ እቲ <body>) ወጻኢ height፡ ስብስብ ምህላውካን ኣብኡ ምትግባርካን ኣረጋግጽ overflow-y: scroll;-ጎኒ ጎኒ a tabindex="0"ንመእተዊ ሰሌዳ ቁልፊ ንምርግጋጽ።

ኣብነት ኣብ navbar

ኣብ ትሕቲ 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>

ኣብነት ምስ nested nav

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

ነጥቢ 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-group

ስክሮልስፒ ምስ .list-groups እውን ይሰርሕ እዩ። ኣብ ጥቓ እቲ ዝርዝር ጉጅለ ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ።

ነጥቢ 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ባህሪ ምስቲ ID ወይ class ናይቲ ወላዲ ባእታ ናይ ዝኾነ Bootstrap .navcomponent ንውስኸሉ።

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;ብመንገዲ ጃቫስክሪፕት ናብቲ scrollspy ደውልሉ፤

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

ፍታሕ ዝግበረሎም ናይ መለለዪ መንነት ዕላማታት የድሊ

ናቭባር ሊንክታት ዝፍታሕ id ዕላማታት ክህልዎም ኣለዎ። ንኣብነት a <a href="#home">home</a>ምስ ገለ ኣብ DOM ከም <div id="home"></div>.

ዘይርኣዩ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ተባሂሎም

ዘይርኣዩ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ክበሃሉን ተዛመድቲ nav ነገራት ፈጺሞም ኣይድመቑን እዮም።

ኣገባባት

ምሕዳስ ምግባር

scrollspy ምስ ምውሳኽ ወይ ምእላይ ባእታታት ካብ DOM ተተሓሒዙ ክትጥቀመሉ ከለኻ፡ ነቲ ናይ ምሕዳስ ሜላ ከምዚ ጌርካ ክትጽውዖ ከድልየካ እዩ፤

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

ምጉሓፍ

ናይ ሓደ ባእታ ስክሮልስፒ የጥፍኦ። (ኣብ DOM element ዝተዓቀበ ዳታ የወግድ)

getInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM ባእታ ዝተኣሳሰር scrollspy instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ

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

getOrCreateInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM ባእታ ዝተኣሳሰር scrollspy instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ

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ነቲ ሜላ ክጥቀም እዩ ። ስክሮል ኮርዲኔት ንምርካብ the and properties ክጥቀም እዩ ።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...
})