스크롤스파이

뷰포트에서 현재 활성화된 링크를 나타내기 위해 스크롤 위치를 기반으로 부트스트랩 탐색 또는 목록 그룹 구성 요소를 자동으로 업데이트합니다.

이 페이지에서

작동 방식

Scrollspy가 제대로 작동하려면 몇 가지 요구 사항이 있습니다.

Bootstrap 탐색 구성 요소 또는 목록 그룹 에서 사용해야 합니다 .
Scrollspy는 position: relative;당신이 감시하고 있는 요소, 일반적으로 <body>.
앵커( <a>)는 필수이며 해당 요소를 가리켜야 합니다 id.

성공적으로 구현되면 탐색 또는 목록 그룹이 그에 따라 업데이트 .active되어 관련 대상을 기반으로 한 항목에서 다음 항목으로 클래스를 이동합니다.

스크롤 가능한 컨테이너 및 키보드 액세스

스크롤 가능한 컨테이너( 제외 <body>)를 만드는 경우 키보드 액세스를 보장하기 위해 height세트와 overflow-y: scroll;함께 적용해야 합니다 .tabindex="0"

탐색 모음 아래 영역을 스크롤하여 활성 클래스 변경을 확인합니다. 드롭다운 항목도 강조 표시됩니다.

첫 번째 제목

이것은 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는 중첩된 .navs에서도 작동합니다. 중첩 .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는 s와도 작동합니다 .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-targetBootstrap 구성 요소의 상위 요소에 대한 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;JavaScript를 통해 scrollspy를 호출합니다.

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

확인 가능한 ID 대상이 필요합니다.

Navbar 링크에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <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()
})

처분하다

요소의 scrollspy를 파괴합니다. (DOM 요소에 저장된 데이터 제거)

getInstance

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()`스크롤 좌표를 가져옵니다. 및 속성을 `position`사용하여 스크롤 좌표를 가져옵니다.`HTMLElement.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...
})

스크롤스파이

작동 방식

스크롤 가능한 컨테이너 및 키보드 액세스

탐색 모음의 예

첫 번째 제목

두 번째 제목

세 번째 제목

네 번째 제목

다섯 번째 제목

중첩된 탐색이 있는 예

항목 1

항목 1-1

항목 1-2

항목 2

항목 3

항목 3-1

항목 3-2

목록 그룹이 있는 예

항목 1

항목 2

항목 3

항목 4

용법

데이터 속성을 통해

자바스크립트를 통해

확인 가능한 ID 대상이 필요합니다.

보이지 않는 대상 요소는 무시됨

행동 양식

새로 고치다

처분하다

getInstance

getOrCreateInstance

옵션

이벤트