Source

스크롤스파이

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

작동 방식

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

  • 소스에서 JavaScript를 빌드하는 경우util.js .
  • Bootstrap 탐색 구성 요소 또는 목록 그룹 에서 사용해야 합니다 .
  • Scrollspy는 position: relative;당신이 감시하고 있는 요소, 일반적으로 <body>.
  • , 이외의 요소를 염탐할 때는 <body>반드시 height세트 를 가지고 overflow-y: scroll;적용해야 합니다.
  • 앵커( <a>)는 필수이며 해당 요소를 가리켜야 합니다 id.

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

탐색 모음의 예

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

@지방

광고레깅스 키타르, 브런치 이드 아트파티 돌로라보레. Pitchfork yr enim lo-fi가 품절되기 전입니다. Tumblr 농장에서 탁자까지 자전거 권리 무엇이든. Anim keffiyeh 칼레스 카디건. 벨릿 세이탄 맥스위니의 포토부스 3 울프문 이레르. Cosby 스웨터 lomo jean shorts, williamsburg hoodie minim qui 당신은 아마 그들과 카디건 트러스트 펀드 culpa biodiesel wes anderson 미학에 대해 들어 본 적이 없을 것입니다. Nihil 문신을 한 accusamus, cred 아이러니 바이오디젤 keffiyeh 장인 ullamco 결과.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

키타 트위 블로그, 쿨파 메신저백 마르파 웬디 델렉투스 푸드트럭. 사피엔테 신디사이저 Locavore sed helvetica 진부한 아이러니, Thundercats는 아마도 들어 본 적이 없을 것입니다. Labore elit placeat 매진되기 전에, terry richardson proident brunch nesciunt quis cosby 스웨터 pariatur keffiyeh ut helvetica artisan. 가디건 수제 맥주 세이탄 레디메이드 벨릿. VHS 샴브레이 라보리스 템퍼 베니아. 애님 몰릿 미니님 코모도 울람코 썬더캣츠.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

중첩된 탐색이 있는 예

Scrollspy는 중첩된 .navs에서도 작동합니다. 중첩 .nav이 .active이면 부모도 됩니다 .active. 탐색 모음 옆의 영역을 스크롤하여 활성 클래스 변경을 확인합니다.

항목 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur laboure. Fugiat labourum incididunt tempor eu consequat enim dolore proident. Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipiscing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

항목 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip laboure ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Proident ullamco aute magna pariatur nostrud laboure에 앉아 있으십시오. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipiscing voluptate excepteur minim exercitation minim minim commodo adipiscing exercitation officia nisi adipisicing. Anim id duis qui consequat laboure adipisicing sint dolor elit cillum anim et fugiat.

항목 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa commodo elit adipiscing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint Labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad laboure mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur laboure. Fugiat labourum incididunt tempor eu consequat enim dolore proident. Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipiscing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

항목 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis labis ad sit ipsum anim Lorem. Incidunt veniam velit 엘리트 엘리트 veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. 노동 nisi sit est tempor labourum mollit Labore officia 노동 예외 commodo non commodo dolor 예외 commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

항목 3

Quis anim sit do met fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

항목 4

Quis anim sit do met fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

<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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"감시하려는 요소에 추가합니다(대부분의 경우 <body>). 그런 다음 data-targetBootstrap 구성 요소의 상위 요소에 대한 ID 또는 클래스가 있는 속성을 추가합니다 .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

자바스크립트를 통해

CSS를 추가한 후 position: relative;JavaScript를 통해 scrollspy를 호출합니다.

$('body').scrollspy({ target: '#navbar-example' })

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

Navbar 링크에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <a href="#home">home</a>는 DOM과 같은 항목과 일치해야 합니다 <div id="home"></div>.

타겟 이 아닌 :visible요소는 무시됨

:visiblejQuery에 따르지 않는 대상 요소는 무시되고 해당 탐색 항목은 강조 표시되지 않습니다.

행동 양식

.scrollspy('refresh')

DOM에서 요소를 추가하거나 제거하는 것과 함께 scrollspy를 사용할 때 다음과 같이 새로 고침 메서드를 호출해야 합니다.

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

요소의 scrollspy를 파괴합니다.

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-offset="".

이름 유형 기본 설명
오프셋 숫자 10 스크롤 위치를 계산할 때 위에서 오프셋할 픽셀입니다.
방법 끈 자동 스파이 요소가 있는 섹션을 찾습니다. auto스크롤 좌표를 가져오는 가장 좋은 방법을 선택합니다. offsetjQuery 오프셋 방법을 사용하여 스크롤 좌표를 가져옵니다. positionjQuery 위치 방법을 사용하여 스크롤 좌표를 가져옵니다.
표적 끈 Scrollspy 플러그인을 적용할 요소를 지정합니다.

이벤트

이벤트 유형 설명
activate.bs.scrollspy 이 이벤트는 scrollspy에 의해 새 항목이 활성화될 때마다 스크롤 요소에서 발생합니다. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})