부트스트랩 JS 스크롤스파이
JS 스크롤스파이
Scrollspy는 스크롤 위치를 기반으로 탐색 목록의 링크를 자동으로 업데이트하는 데 사용됩니다.
Scrollspy에 대한 자습서는 Bootstrap Scrollspy 자습서 를 읽으십시오 .
데이터-* 속성을 통해
data-spy="scroll"스크롤 가능 영역으로 사용해야 하는 요소에 추가 합니다(종종 이것이 <body>요소임).
그런 다음 data-targetid 값 또는 탐색 모음의 클래스 이름( )으로 속성을 추가합니다 .navbar. 이것은 탐색 모음이 스크롤 가능한 영역과 연결되어 있는지 확인하기 위한 것입니다.
<div id="section1">스크롤 가능한 요소는 탐색 모음의 목록 항목( 일치 ) 내부에 있는 링크의 ID와 일치해야 합니다 <a href="#section1">.
선택적 data-offset속성은 스크롤 위치를 계산할 때 상단에서 오프셋할 픽셀 수를 지정합니다. 스크롤 가능한 요소로 이동할 때 탐색 모음 내부의 링크가 활성 상태를 너무 빨리 또는 너무 일찍 변경한다고 느낄 때 유용합니다. 기본값은 10픽셀입니다.
상대 위치 지정 필요: data-spy="scroll"이 있는 요소는 CSS position 속성이 필요하며 값이 "relative"인 값이 제대로 작동해야 합니다.
예시
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
자바스크립트를 통해
다음을 사용하여 수동으로 활성화:
예시
$('body').scrollspy({target: ".navbar"})
Scrollspy 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-offset=""에서와 같이 옵션 이름을 data-에 추가합니다.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Scrollspy 방법
다음 표에는 사용 가능한 모든 scrollspy 방법이 나열되어 있습니다.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Scrollspy 이벤트
다음 표에는 사용 가능한 모든 scrollspy 이벤트가 나열되어 있습니다.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |