Scrollspy

వీక్షణపోర్ట్‌లో ప్రస్తుతం ఏ లింక్ సక్రియంగా ఉందో సూచించడానికి స్క్రోల్ స్థానం ఆధారంగా బూట్‌స్ట్రాప్ నావిగేషన్ లేదా జాబితా గ్రూప్ భాగాలను స్వయంచాలకంగా నవీకరించండి.

ఈ పేజీలో

అది ఎలా పని చేస్తుంది

Scrollspy సరిగ్గా పనిచేయడానికి కొన్ని అవసరాలు ఉన్నాయి:

ఇది తప్పనిసరిగా బూట్‌స్ట్రాప్ nav భాగం లేదా జాబితా సమూహంలో ఉపయోగించబడాలి .
Scrollspyకి position: relative;మీరు గూఢచర్యం చేస్తున్న మూలకం అవసరం, సాధారణంగా <body>.
యాంకర్లు ( <a>) అవసరం మరియు దానితో కూడిన మూలకాన్ని తప్పనిసరిగా సూచించాలి id.

విజయవంతంగా అమలు చేయబడినప్పుడు, మీ nav లేదా జాబితా సమూహం తదనుగుణంగా నవీకరించబడుతుంది, .activeవాటి అనుబంధిత లక్ష్యాల ఆధారంగా తరగతిని ఒక అంశం నుండి మరొకదానికి తరలించడం జరుగుతుంది.

స్క్రోల్ చేయగల కంటైనర్లు మరియు కీబోర్డ్ యాక్సెస్

మీరు స్క్రోల్ చేయదగిన కంటైనర్‌ను తయారు చేస్తుంటే (ఇంకా కాకుండా <body>), కీబోర్డ్ యాక్సెస్‌ని నిర్ధారించడానికి ఒక heightసెట్‌తో overflow-y: scroll;పాటు దానికి ఒక సెట్‌ని వర్తింపజేయండి .tabindex="0"

నావ్‌బార్ దిగువన ఉన్న ప్రాంతాన్ని స్క్రోల్ చేయండి మరియు సక్రియ తరగతి మార్పును చూడండి. డ్రాప్‌డౌన్ అంశాలు కూడా హైలైట్ చేయబడతాయి.

మొదటి శీర్షిక

ఇది 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>

నెస్టెడ్ nav తో ఉదాహరణ

Scrollspy నెస్టెడ్ లతో కూడా పనిచేస్తుంది .nav. ఒక గూడు ఉంటే .nav, .activeదాని తల్లిదండ్రులు కూడా ఉంటారు .active. నావ్‌బార్ ప్రక్కన ఉన్న ప్రాంతాన్ని స్క్రోల్ చేయండి మరియు యాక్టివ్ క్లాస్ మార్పును చూడండి.

అంశం 1

అంశం 1-1

అంశం 1-2

అంశం 2

అంశం 3

అంశం 3-1

అంశం 3-2

<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>

జాబితా-సమూహంతో ఉదాహరణ

Scrollspy కూడా పని చేస్తుంది .list-group. జాబితా సమూహం పక్కన ఉన్న ప్రాంతాన్ని స్క్రోల్ చేయండి మరియు సక్రియ తరగతి మార్పును చూడండి.

అంశం 1 అంశం 2 అంశం 3 అంశం 4

అంశం 1

అంశం 2

అంశం 3

అంశం 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 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 లేదా క్లాస్‌తో లక్షణాన్ని జోడించండి..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>

జావాస్క్రిప్ట్ ద్వారా

మీ CSSలో జోడించిన తర్వాత position: relative;, JavaScript ద్వారా scrollspyకి కాల్ చేయండి:

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

పరిష్కరించగల ID లక్ష్యాలు అవసరం

Navbar లింక్‌లు తప్పనిసరిగా పరిష్కరించగల id లక్ష్యాలను కలిగి ఉండాలి. ఉదాహరణకు, <a href="#home">home</a>తప్పనిసరిగా DOMలో ఏదో ఒక దానికి అనుగుణంగా ఉండాలి <div id="home"></div>.

కనిపించని లక్ష్య అంశాలు విస్మరించబడ్డాయి

కనిపించని లక్ష్య అంశాలు విస్మరించబడతాయి మరియు వాటి సంబంధిత nav అంశాలు ఎప్పటికీ హైలైట్ చేయబడవు.

పద్ధతులు

రిఫ్రెష్

DOM నుండి మూలకాలను జోడించడం లేదా తీసివేయడంతో పాటు scrollspyని ఉపయోగిస్తున్నప్పుడు, మీరు రిఫ్రెష్ పద్ధతిని ఇలా పిలవాలి:

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

పారవేయండి

మూలకం యొక్క scrollspyని నాశనం చేస్తుంది. (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`	స్ట్రింగ్ \| j క్వెరీ వస్తువు \| DOM మూలకం		Scrollspy ప్లగిన్‌ని వర్తింపజేయడానికి మూలకాన్ని నిర్దేశిస్తుంది.

ఈవెంట్స్

ఈవెంట్ రకం	వివరణ
`activate.bs.scrollspy`	scrollspy ద్వారా కొత్త ఐటెమ్ యాక్టివేట్ అయినప్పుడల్లా ఈ ఈవెంట్ స్క్రోల్ ఎలిమెంట్‌పై ఫైర్ అవుతుంది.

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

Scrollspy

అది ఎలా పని చేస్తుంది

స్క్రోల్ చేయగల కంటైనర్లు మరియు కీబోర్డ్ యాక్సెస్

navbarలో ఉదాహరణ

మొదటి శీర్షిక

రెండవ శీర్షిక

మూడవ శీర్షిక

నాల్గవ శీర్షిక

ఐదవ శీర్షిక

నెస్టెడ్ nav తో ఉదాహరణ

అంశం 1

అంశం 1-1

అంశం 1-2

అంశం 2

అంశం 3

అంశం 3-1

అంశం 3-2

జాబితా-సమూహంతో ఉదాహరణ

అంశం 1

అంశం 2

అంశం 3

అంశం 4

వాడుక

డేటా లక్షణాల ద్వారా

జావాస్క్రిప్ట్ ద్వారా

పరిష్కరించగల ID లక్ష్యాలు అవసరం

కనిపించని లక్ష్య అంశాలు విస్మరించబడ్డాయి

పద్ధతులు

రిఫ్రెష్

పారవేయండి

getInstance

getOrCreateInstance

ఎంపికలు

ఈవెంట్స్