ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

Scrollspy

อัปเดตการนำทาง Bootstrap หรือส่วนประกอบกลุ่มรายการโดยอัตโนมัติตามตำแหน่งการเลื่อนเพื่อระบุว่าลิงก์ใดที่ใช้งานอยู่ในวิวพอร์ต

ในหน้านี้

มันทำงานอย่างไร

Scrollspy มีข้อกำหนดบางประการเพื่อให้ทำงานได้อย่างถูกต้อง:

  • ต้องใช้กับคอมโพเนนต์การนำ ทาง Bootstrap หรือกลุ่มรายการ
  • Scrollspy ต้องการposition: relative;องค์ประกอบที่คุณกำลังสอดแนม โดยปกติแล้ว ไฟล์<body>.
  • จำเป็นต้องมีจุด ยึด ( <a>) และต้องชี้ไปที่องค์ประกอบidด้วย

เมื่อใช้งานสำเร็จ ระบบนำทางหรือกลุ่มรายการของคุณจะอัปเดตตามนั้น โดยย้าย.activeคลาสจากรายการหนึ่งไปยังรายการถัดไปตามเป้าหมายที่เกี่ยวข้อง

คอนเทนเนอร์แบบเลื่อนได้และการเข้าถึงคีย์บอร์ด

หากคุณกำลังสร้างคอนเทนเนอร์แบบเลื่อนได้ (นอกเหนือจาก<body>) ตรวจสอบให้แน่ใจว่าได้heightตั้งค่าและoverflow-y: scroll;นำไปใช้กับคอนเทนเนอร์นั้น ควบคู่ไปกับ a 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>

ตัวอย่างที่มี nav . ที่ซ้อนกัน

Scrollspy ยังใช้งานได้กับ nested .navs ถ้าซ้อนกัน.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>

ตัวอย่างกับ list-group

Scrollspy ยังใช้งานได้กับ.list-groups เลื่อนพื้นที่ถัดจากกลุ่มรายการและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่

รายการที่ 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แอตทริบิวต์ด้วย ID หรือคลาสขององค์ประกอบหลักขององค์ประกอบ.navBootstrap

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>

ผ่านจาวาสคริปต์

หลังจากเพิ่มposition: relative;ใน CSS ของคุณแล้ว ให้เรียก 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)

รับอินสแตนซ์

วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์ของ 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 ให้ผนวกชื่ออ็อพชันต่อท้าย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...
})