முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

ஸ்க்ரோல்ஸ்பி

வியூபோர்ட்டில் தற்போது எந்த இணைப்பு செயலில் உள்ளது என்பதைக் குறிக்க, பூட்ஸ்டார்ப் வழிசெலுத்தலைத் தானாகப் புதுப்பிக்கவும் அல்லது உருட்டும் நிலையின் அடிப்படையில் குழு கூறுகளை பட்டியலிடவும்.

இந்தப் பக்கத்தில்

எப்படி இது செயல்படுகிறது

Scrollspy சரியாகச் செயல்பட சில தேவைகள் உள்ளன:

  • இது பூட்ஸ்டார்ப் nav கூறு அல்லது பட்டியல் குழுவில் பயன்படுத்தப்பட வேண்டும் .
  • Scrollspy க்கு position: relative;நீங்கள் உளவு பார்க்கும் உறுப்பு தேவைப்படுகிறது, பொதுவாக <body>.
  • நங்கூரங்கள் ( <a>) தேவை மற்றும் அதனுடன் ஒரு உறுப்பை சுட்டிக்காட்ட வேண்டும் id.

வெற்றிகரமாக செயல்படுத்தப்படும் போது, ​​உங்கள் nav அல்லது பட்டியல் குழு அதற்கேற்ப புதுப்பிக்கப்படும், .activeஅதனுடன் தொடர்புடைய இலக்குகளின் அடிப்படையில் வகுப்பை ஒரு உருப்படியிலிருந்து அடுத்த உருப்படிக்கு நகர்த்தும்.

உருட்டக்கூடிய கொள்கலன்கள் மற்றும் விசைப்பலகை அணுகல்

நீங்கள் ஸ்க்ரோல் செய்யக்கூடிய கொள்கலனை உருவாக்குகிறீர்கள் என்றால் (மற்றவை தவிர <body>), விசைப்பலகை அணுகலை உறுதிசெய்ய ஒரு heightசெட் மற்றும் overflow-y: scroll;அதனுடன் பயன்படுத்தவும் .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>

உள்ளமைக்கப்பட்ட nav உடன் எடுத்துக்காட்டு

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

ஜாவாஸ்கிரிப்ட் வழியாக

உங்கள் CSS இல் சேர்த்த பிறகு position: relative;, JavaScript வழியாக scrollspy ஐ அழைக்கவும்:

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

தீர்க்கக்கூடிய அடையாள இலக்குகள் தேவை

Navbar இணைப்புகள் தீர்க்கக்கூடிய ஐடி இலக்குகளைக் கொண்டிருக்க வேண்டும். எடுத்துக்காட்டாக, <a href="#home">home</a>DOM இல் உள்ள ஏதாவது ஒன்றைப் போன்றே ஒத்திருக்க வேண்டும் <div id="home"></div>.

காணப்படாத இலக்கு கூறுகள் புறக்கணிக்கப்பட்டது

கண்ணுக்குத் தெரியாத இலக்கு கூறுகள் புறக்கணிக்கப்படும் மற்றும் அவற்றின் தொடர்புடைய nav உருப்படிகள் ஒருபோதும் முன்னிலைப்படுத்தப்படாது.

முறைகள்

புதுப்பிப்பு

DOM இலிருந்து உறுப்புகளைச் சேர்ப்பது அல்லது அகற்றுவதுடன் இணைந்து ஸ்க்ரோல்ஸ்பையைப் பயன்படுத்தும் போது, ​​நீங்கள் புதுப்பிப்பு முறையை இப்படி அழைக்க வேண்டும்:

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...
})