in English

Scrollspy

बुटस्ट्र्याप नेभिगेसन वा सूची समूह कम्पोनेन्टहरू स्क्रोल स्थितिमा आधारित भ्यूपोर्टमा हाल कुन लिङ्क सक्रिय छ भनेर संकेत गर्न स्वचालित रूपमा अद्यावधिक गर्नुहोस्।

यस पृष्ठमा

यसले कसरी काम गर्छ

Scrollspy ले ठीकसँग काम गर्नका लागि केही आवश्यकताहरू छन्:

यो बुटस्ट्र्याप एनएभ कम्पोनेन्ट वा सूची समूहमा प्रयोग गरिनुपर्छ ।
Scrollspy लाई position: relative;तपाइँले जासुसी गरिरहनु भएको तत्वमा चाहिन्छ, सामान्यतया <body>।
एङ्करहरू ( <a>) आवश्यक छन् र त्यससँग एउटा तत्वलाई औंल्याउनुपर्छ id।

सफलतापूर्वक कार्यान्वयन गर्दा, तपाईंको एनएभ वा सूची समूह तदनुसार अद्यावधिक हुनेछ, .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 ले नेस्टेड .navs सँग पनि काम गर्दछ। यदि गुँड .navछ भने .active, यसको आमाबाबु पनि हुनेछन् .active। नेभबारको छेउमा रहेको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्।

वस्तु १

वस्तु १-१

वस्तु १-२

वस्तु २

वस्तु ३

वस्तु ३-१

वस्तु ३-२

<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-groups सँग काम गर्दछ। सूची समूहको छेउमा क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्।

वस्तु १ वस्तु २ वस्तु ३ वस्तु ४

वस्तु १

वस्तु २

वस्तु ३

वस्तु ४

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

प्रयोग

डाटा विशेषताहरू मार्फत

तपाईको शीर्षपट्टी नेभिगेसनमा सजिलैसँग scrollspy व्यवहार थप्नको 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;, जाभास्क्रिप्ट मार्फत scrollspy कल गर्नुहोस्:

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

समाधानयोग्य ID लक्ष्यहरू आवश्यक छ

Navbar लिङ्कहरूमा समाधान गर्न मिल्ने आईडी लक्ष्यहरू हुनुपर्छ। उदाहरण को लागी, <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 तत्वमा भण्डारण गरिएको डाटा हटाउँछ)

उदाहरण प्राप्त गर्नुहोस्

स्थिर विधि जसले तपाईंलाई DOM तत्वसँग सम्बन्धित scrollspy उदाहरण प्राप्त गर्न अनुमति दिन्छ

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

getOrCreateInstance

स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित scrollspy उदाहरण प्राप्त गर्न अनुमति दिन्छ, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्न अनुमति दिन्छ।

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-, जस्तै मा data-bs-offset=""।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
`offset`	संख्या	`10`	स्क्रोलको स्थिति गणना गर्दा माथिबाट अफसेट गर्न पिक्सेलहरू।
`method`	तार	`auto`	जासुसी गरिएको तत्व कुन खण्डमा छ पत्ता लगाउँदछ। `auto`स्क्रोल निर्देशांकहरू प्राप्त गर्नको लागि उत्तम विधि छनौट गर्नेछ। स्क्रोल निर्देशांक प्राप्त गर्न विधि `offset`प्रयोग गर्नेछ । स्क्रोल निर्देशांक प्राप्त गर्न र गुणहरू प्रयोग गर्नेछ ।`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	स्ट्रिङ \| jQuery वस्तु \| 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 को साथ उदाहरण

वस्तु १

वस्तु १-१

वस्तु १-२

वस्तु २

वस्तु ३

वस्तु ३-१

वस्तु ३-२

सूची-समूहको साथ उदाहरण

वस्तु १

वस्तु २

वस्तु ३

वस्तु ४

प्रयोग

डाटा विशेषताहरू मार्फत

जाभास्क्रिप्ट मार्फत

समाधानयोग्य ID लक्ष्यहरू आवश्यक छ

नदेखिने लक्ष्य तत्वहरूलाई बेवास्ता गरियो

विधिहरू

ताजा गर्नुहोस्

डिस्पोज

उदाहरण प्राप्त गर्नुहोस्

getOrCreateInstance

विकल्पहरू

घटनाहरू