in English

스크롤스파이

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

작동 방식

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

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

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

탐색 모음의 예

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

@지방

scrollspy 예제의 자리 표시자 콘텐츠입니다. 당신은 최고의 건축물을 얻었습니다. 여권 스탬프, 그녀는 국제적입니다. 훌륭하고 신선하고 치열합니다. 언젠가 내가 당신을 잃을 것이라고는 결코 계획하지 않았습니다. 그녀는 당신의 마음을 먹는다. 당신의 키스는 우주적이고 모든 움직임은 마법입니다. 내 말은, 그녀가 그 사람인 것처럼 말이야. 사랑하는 사람에게 인사하고 여행을 떠나자. 7월 4일 같은 밤을 보내세요! 그러나 당신은 오히려 낭비하고 싶습니다.

@mdo

scrollspy 예제의 자리 표시자 콘텐츠입니다. 그녀는 뮤즈이자 아티스트이기 때문입니다. (이것이 우리가 하는 방법입니다) 그래서 당신은 마법을 가지고 놀고 싶어합니다. 그러니 나에게 모든 것을 주기 전에 확실히 하십시오. 나는 걷고 있다, 나는 공중에 걷고 있다(오늘 밤). 이야기를 건너 뛰고, 모두 들었고, 산책을 할 시간입니다.

하나

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

scrollspy 예제의 자리 표시자 콘텐츠입니다. 춤을 추고 싶다면 모든 걸 원하면 내가 불러야 할 여자라는 걸 알잖아요. 내가 원하는 폭풍우를 헤쳐 나가십시오. 그래서 내가 당신에게 당신의 생일 정장을 얻을 수 있습니다. 도망친 사람. 지난 금요일 밤, 그래, 우리가 법을 어긴 것 같아, 항상 우리가 멈출 거라고 말했어. 왜냐하면 그녀는 약간의 요코(Yoko)이고 그녀는 약간의 '오 안돼'이기 때문입니다. 나는 턱이 떨어지는 ', 눈이 펑하는 ', 머리를 돌리는 '몸을 충격을 원합니다. 네, 신용카드 한도를 다 채우고 술집에서 쫓겨났습니다.

그리고 좋은 측정을 위해 더 많은 자리 표시자 콘텐츠가 있습니다.

<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-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

scrollspy 예제의 자리 표시자 콘텐츠입니다. 이것은 항목 1과 관련이 있습니다. 그녀는 국제적인 미소를 가지고 있기 때문에 당신을 높이, 너무 높이 데려갑니다. 내 침대에 낯선 사람이 있고, 내 머리가 쿵쾅거린다. 안 돼. 다른 삶에서 나는 당신을 머물게 할 것입니다. 난 뭐든지 할 수 있으니까. 내 최고의 전투를 위해 옷을 입는다. 부모님의 술을 훔쳐 옥상으로 올라가곤 했다. 톤, 탠 핏, 준비 완료, 무거워지기 때문에 볼륨을 높이세요. 그녀의 사랑은 마약과도 같습니다. 나에게 선택권이 있다는 걸 잊고 있었던 것 같다.

항목 1-1

scrollspy 예제의 자리 표시자 콘텐츠입니다. 이것은 항목 1-1과 관련이 있습니다. 당신은 최고의 건축물을 얻었습니다. 여권 스탬프, 그녀는 국제적입니다. 훌륭하고 신선하고 치열합니다. 언젠가 내가 당신을 잃을 것이라고는 결코 계획하지 않았습니다. 그녀는 당신의 마음을 먹는다. 당신의 키스는 우주적이고 모든 움직임은 마법입니다. 내 말은, 그녀가 그 사람인 것처럼 말이야. 사랑하는 사람에게 인사하고 여행을 떠나자. 7월 4일 같은 밤을 보내세요! 그러나 당신은 오히려 낭비하고 싶습니다.

항목 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

scrollspy 예제의 자리 표시자 콘텐츠입니다. 이것은 3-2번 항목과 관련이 있습니다. 당신은 원래, 대체할 수 없습니다. 밤새도록 그들은 당신의 노래를 연주합니다. 캘리포니아 소녀들 우리는 부인할 수 없습니다. 새장 없는 새처럼. 이제 두려움은 없어 자유로워져 조건 없이 사랑할게 벽에 적힌 글이 보이네요. 세계를 여행할 수 있지만 황금빛 해안에 가까운 것은 없습니다.

<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

scrollspy 목록 그룹 예제에 대한 자리 표시자 콘텐츠입니다. 이것은 항목 1과 관련이 있습니다. 사과가 필요하지 않습니다. 이제 두려움은 없어 자유로워져 조건 없이 사랑할게 지난 금요일 밤. 부끄러워하지 마십시오. 나는 그것이 아름답습니다. 우리가 처음 만났을 때 고등학교 졸업 후 여름. 그녀는 뮤즈이자 아티스트이기 때문입니다. 뭐? 기다리다. 나는 예외라고 생각했다.

항목 2

scrollspy 목록 그룹 예제에 대한 자리 표시자 콘텐츠입니다. 이것은 항목 2와 관련이 있습니다. 네, 그녀는 자신의 비트에 맞춰 춤을 춥니다. 안 돼. 당신은 가장 위대한 사람이 될 수 있습니다. 왜냐면, 자기야, 넌 불꽃이야. 아마도 모든 문을 닫은 이유일 것입니다. 마음을 열고 시작하십시오. 그래서 très chic, 예, 그녀는 고전적입니다.

항목 3

scrollspy 목록 그룹 예제에 대한 자리 표시자 콘텐츠입니다. 이것은 항목 3과 관련이 있습니다. 우리는 점점 더 높아집니다. 서로 없이는 절대로, 우리는 계약을 맺었습니다. 나는 공중에 걷고 있다. 누군가가 당신이 문신을 제거했다고 말했습니다. 지금 나는 나비처럼 떠 있다. 톤, 탠 핏, 준비 완료, 무거워지기 때문에 볼륨을 높이세요. 일단 당신이 내 것이면, 당신은 내 것입니다. 불을 켜서 비추기만 하면 됩니다! 그래서 우리는 대로를 쳤습니다. 종이가 너무 얇다고 느낀 적이 있습니까? 다 보여요, 지금 봐요.

항목 4

scrollspy 목록 그룹 예제에 대한 자리 표시자 콘텐츠입니다. 이것은 항목 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-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 위치 방법을 사용하여 스크롤 좌표를 가져옵니다.
표적 문자열 | jQuery 객체 | DOM 요소 Scrollspy 플러그인을 적용할 요소를 지정합니다.

이벤트

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