Scrollspy

ავტომატურად განაახლეთ Bootstrap ნავიგაცია ან ჩამოთვალეთ ჯგუფის კომპონენტები გადახვევის პოზიციის მიხედვით, რათა მიუთითოთ რომელი ბმული არის ამჟამად აქტიური ხედვის პორტში.

ამ გვერდზე

Როგორ მუშაობს

Scrollspy-ს აქვს რამდენიმე მოთხოვნა გამართულად ფუნქციონირებისთვის:

ის უნდა იყოს გამოყენებული Bootstrap nav კომპონენტის ან სიის ჯგუფში .
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>

მაგალითი წყობილი ნავით

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>

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, დაამატეთ data-bs-spy="scroll"ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება <body>). შემდეგ დაამატეთ data-bs-targetატრიბუტი ნებისმიერი Bootstrap .navკომპონენტის მშობელი ელემენტის ID-ით ან კლასით.

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>

JavaScript-ის საშუალებით

CSS-ის დამატების position: relative;შემდეგ, დარეკეთ scrollspy-ს JavaScript-ით:

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

საჭიროა მოგვარებადი ID სამიზნეები

Navbar-ის ბმულებს უნდა ჰქონდეთ ამოსაცნობი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაც DOM-ში, როგორიცაა <div id="home"></div>.

უხილავი სამიზნე ელემენტები იგნორირებულია

სამიზნე ელემენტები, რომლებიც არ ჩანს, იგნორირებული იქნება და მათი შესაბამისი ნავიგები არასოდეს იქნება მონიშნული.

მეთოდები

განაახლეთ

როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:

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

განკარგავს

ანადგურებს ელემენტის scrollspy-ს. (შლის DOM ელემენტზე შენახულ მონაცემებს)

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ scrollspy მაგალითი, რომელიც დაკავშირებულია DOM ელემენტთან

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

getOrCreateInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ scrollspy ინსტანცია ასოცირებული DOM ელემენტთან, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული

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()`მეთოდს გადახვევის კოორდინატების მისაღებად. `position`გამოიყენებს `HTMLElement.offsetTop`და `HTMLElement.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

Როგორ მუშაობს

გადახვევის კონტეინერები და კლავიატურაზე წვდომა

მაგალითი ნავიბარში

პირველი სათაური

მეორე სათაური

მესამე სათაური

მეოთხე სათაური

მეხუთე სათაური

მაგალითი წყობილი ნავით

პუნქტი 1

პუნქტი 1-1

პუნქტი 1-2

პუნქტი 2

პუნქტი 3

პუნქტი 3-1

პუნქტი 3-2

მაგალითი სია-ჯგუფით

პუნქტი 1

პუნქტი 2

პუნქტი 3

პუნქტი 4

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

JavaScript-ის საშუალებით

საჭიროა მოგვარებადი ID სამიზნეები

უხილავი სამიზნე ელემენტები იგნორირებულია

მეთოდები

განაახლეთ

განკარგავს

getInstance

getOrCreateInstance

Პარამეტრები

Ივენთი