ስክሮልስፒ
ኣየናይ መላግቦ ኣብዚ እዋን ኣብቲ ቪውፖርት ንጡፍ ምዃኑ ንምምልካት ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ናይ ቡትስትራፕ ምድህሳስ ወይ ዝርዝር ናይ ጉጅለ ኣካላት ብኣውቶማቲክ ምዕራፍ።
ከመይ ይሰርሕ
ስክሮልስፒ ብግቡእ ንኽሰርሕ ገለ ረቛሒታት ኣለዎ፤
- ኣብ 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 .nav
s እውን ይሰርሕ እዩ። ሓደ ሰፈር እንተኾይኑ .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-group
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
ባህሪ ምስቲ ID ወይ class ናይቲ ወላዲ ባእታ ናይ ዝኾነ Bootstrap .nav
component ንውስኸሉ።
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() position HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
ሕብረ ቃላት | jQuery ነገር | DOM ባእታ | Scrollspy ፕላግ-ኢን ንምትግባር ባእታ ይገልጽ። |
ፍጻሜታት
ዓይነት ፍጻመ | መግለፂ |
---|---|
activate.bs.scrollspy |
እዚ ፍጻመ እዚ ሓድሽ ኣቕሓ ብስክሮልስፒ ኣብ ዝንቀሳቐሰሉ እዋን ኣብቲ ናይ ስክሮል ባእታ ይትኩስ። |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})