გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

Scrollspy

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

ამ გვერდზე

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

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

  • ის უნდა იყოს გამოყენებული Bootstrap nav კომპონენტის ან სიის ჯგუფში .
  • Scrollspy მოითხოვს position: relative;ელემენტს, რომელსაც თქვენ ჯაშუშობთ, ჩვეულებრივ <body>.
  • წამყვანები ( <a>) საჭიროა და უნდა მიუთითებდეს ამ ელემენტზე id.

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

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

თუ თქვენ ამზადებთ გადახვევად კონტეინერს (გარდა <body>), აუცილებლად გქონდეთ heightკომპლექტი და overflow-y: scroll;მიმართეთ მას - tabindex="0"კლავიატურაზე წვდომის უზრუნველსაყოფად.

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

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

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

ეს არის გარკვეული ჩანაცვლების კონტენტი 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>

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

Scrollspy ასევე მუშაობს წყობილ .navს-ებთან. თუ ბუდეა .nav, .activeმისი მშობლებიც იქნებიან .active. გადაახვიეთ ნავიბარის გვერდით მდებარე ტერიტორია და უყურეთ აქტიური კლასის ცვლილებას.

პუნქტი 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>

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

Scrollspy ასევე მუშაობს .list-groupს. გადაახვიეთ სიის ჯგუფის გვერდით მდებარე არე და უყურეთ აქტიური კლასის ცვლილებას.

პუნქტი 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>

გამოყენება

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

იმისათვის, რომ ადვილად დაამატოთ 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...
})