안녕하세요. 명월입니다.
이 글은 Bootstrap에서 Scrollspy에 대한 글입니다.
먼저 Scrollspy이란 scroll의 위치를 확인해서 event 액션을 취득하는 방법입니다.
제 경험으로는 이 Scrollspy를 만들려고 하면 element의 position을 가져와서 window의 scroll 이벤트에 해당 위치에 도달하면 event 액션을 날리는 방법입니다.
실제로 만드는 것도 크게 어렵지는 않습니다만, 부트스트랩에서 지원하니 이용하겠습니다. 저는 가능하면 제가 만드는 것보다 여러모로 테스트등이 검증된 라이브러리를 사용하는 것을 선호합니다. 직접 만드는 것도 좋지만, 여러 상황을 가정하고 테스트하는 것도 시간이 들기 때문입니다.
링크 - https://getbootstrap.com/docs/4.0/components/scrollspy/
Scrollspy를 사용하는 방법에는 tag만을 이용해서 사용하는 방법과 javascript를 이용해서 사용하는 방법 두가지가 있습니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Select2 Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<br />
<div class="row" style="margin:0px;">
<div class="col-md-2">
<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>
<div class="col-md-10">
<!-- data-spy 설정, target은 id가 list-example, overflow설정과 높이 설정이 되어야 한다. -->
<!-- data-offset은 scrollspy의 갭이다. 즉 list-item1의 위치가 처음 나왔을 때, 얼마나 전에 나오는지, 즉 200이라고 쓰면 div 크기가 200이가 때문에 Item 2가 나오기도 전에 button active가 바뀐다.-->
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" style="height: 200px;overflow: auto;">
<!-- id와 target의 href 어트리뷰트와 매핑된다.-->
<h4 id="list-item-1">Item 1</h4>
...
<h4 id="list-item-2">Item 2</h4>
...
<h4 id="list-item-3">Item 3</h4>
...
<h4 id="list-item-4">Item 4</h4>
...
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
여기서 중요한 포인트는 data-spy가 있는 div는 꼭 overflow가 on(scroll)이 되어야하고, 사이즈 높이가 지정되어야 합니다.
예제
Item 1
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
Item 2
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
Item 3
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
Item 4
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
명월일지
Javascript로 처리하는 방법도 있습니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Select2 Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<br />
<div class="row" style="margin:0px;">
<div class="col-md-2">
<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>
<div class="col-md-10">
<!-- overflow설정과 높이 설정이 되어야 한다. -->
<!-- data-offset은 scrollspy의 갭이다. 즉 list-item1의 위치가 처음 나왔을 때, 얼마나 전에 나오는지, 즉 200이라고 쓰면 div 크기가 200이가 때문에 Item 2가 나오기도 전에 button active가 바뀐다.-->
<div id="contextBox" data-offset="0" class="scrollspy-example" style="height: 200px;overflow: auto;">
<!-- id와 target의 href 어트리뷰트와 매핑된다.-->
<h4 id="list-item-1">Item 1</h4>
...
<h4 id="list-item-2">Item 2</h4>
...
<h4 id="list-item-3">Item 3</h4>
...
<h4 id="list-item-4">Item 4</h4>
...
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$('#contextBox').scrollspy({ target: '#list-example' })
</script>
</body>
</html>
결과는 위 예제와 같은 결과가 나옵니다. 생략하겠습니다.
아래는 scrollspy 이벤트입니다.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
scrollspy로 list-group-item의 selection이 변경되면 발생합니다.
여기까지 Bootstrap에서 Scrollspy에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Panel과 Thumbnails, Card (0) | 2020.02.27 |
|---|---|
| [Bootstrap] 페이징(Paging)와 페이저(pager) (0) | 2020.02.26 |
| [Bootstrap] 드롭 다운(Dropdown) (0) | 2020.02.24 |
| [Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법 (0) | 2019.12.01 |
| [Bootstrap] 모달 (Modal) (2) | 2019.07.19 |
| [Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인 (0) | 2019.07.17 |
| [Bootstrap] 메뉴 바 ( Navbar ) (0) | 2019.07.16 |
| [Bootstrap] Form-control ( Html input object ) (0) | 2019.07.13 |