Bootstrap4 기본 튜토리얼

Bootstrap4 스크롤 감지

스크롤 감지(Scrollspy) 플러그인은 자동으로 업데이트되는 탐색 표 플러그인으로, 스크롤 바의 위치에 따라 해당 탐색 표 목표를 자동으로 업데이트합니다. 기본적으로는 사용자의 스크롤에 따라 업데이트됩니다。

스크롤 감지를 생성하는 방법

다음 예제는 스크롤 감지를 생성하는 방법을 보여줍니다：

以下示例设置了垂直滚动监听：

示例
<!DOCTYPE html>
<html>
　　<head>/<title>Bootstrap 示例<
　　title>-8">
　　<meta charset="utf-<meta name="viewport" content="width=device-width, initial1">
　　scale=//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/<link rel="stylesheet" href="https:/css
　　popper.min.js">//<script src="https:/bootstrap.min.css">/3bootstrap2bootstrap1/jquery/<script>
　　popper.min.js">//<script src="https:/jquery.min.js">/1bootstrap15popper.js/0./umd./<script>
　　popper.min.js">//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/js./bootstrap.min.js">/<script>
　　<style>
　　body {
　　　　　　position: relative;　
　　}
　　</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<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>
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link" href="#section2">Section　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link" href="#section3">Section　3</a>
　　　　</li>
　　　　<li class="nav-item dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
　　　　　　　　Section　4
　　　　　　</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#section41">Link　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#section42">Link　2</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<div　id="section1" class="container-fluid　bg-success" 스타일="padding-top:70px;padding-bottom:70px">
　　<h1>Section　1</h1>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
</div>
<div　id="section2" class="container-fluid　bg-warning" 스타일="padding-top:70px;padding-bottom:70px">
　　<h1>Section　2</h1>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
</div>
<div　id="section3" class="container-fluid　bg-secondary" 스타일="padding-top:70px;padding-bottom:70px">
　　<h1>Section　3</h1>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
</div>
<div　id="section41" class="container-fluid　bg-danger" 스타일="padding-top:70px;padding-bottom:70px">
　　<h1>Section　4　서브메뉴　1</h1>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
</div>
<div　id="section42" class="container-fluid　bg-info" 스타일="padding-top:70px;padding-bottom:70px">
　　<h1>Section　4　서브메뉴　2</h1>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
　　<p>이 부분을 스크롤하여 스크롤할 때 탐색 표를 확인하세요！ 스크롤할 때 탐색 표를 확인하세요!/p>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

예제 해석

감지하고자 하는 요소（일반적으로 body）에 data를 추가합니다-spy="scroll"를 추가합니다。

그런 다음 data-target 속성이 탐색 표의 id 또는 class (.navbar) 값이 됩니다 (.navbar)。이렇게 하면 스크롤 가능 영역과 연결할 수 있습니다。

주의할 것은 스크롤 가능 요소 요소의 id （<div id="section1">） 반드시 탐색 표의 링크 옵션과 일치해야 합니다 （<a href="#section1))

">)。-可选项data 10 offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为

px。 设置相对定位: 使用-data spy="scroll" 的元素需要将其 CSS position

属性设置为 "relative" 才能起作用。

以下示例设置了垂直滚动监听：

示例
<!DOCTYPE html>
<html>
　　<head>/<title>Bootstrap 示例<
　　title>-8">
　　<meta charset="utf-<meta name="viewport" content="width=device-width, initial1">
　　scale=//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/<link rel="stylesheet" href="https:/css
　　popper.min.js">//<script src="https:/bootstrap.min.css">/3bootstrap2bootstrap1/jquery/<script>
　　popper.min.js">//<script src="https:/jquery.min.js">/1bootstrap15popper.js/0./umd./<script>
　　popper.min.js">//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/js./bootstrap.min.js">/<script>
　　<style>
　　body {
　　　　　　position: relative;
　　}
　　ul.nav-pills {
　　　　　　top:　20px;
　　　　　　position: fixed;
　　}
　　div.col-8　div {
　　　　　　height:　500px;
　　}
　　</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
　　<div class="row">
　　　　<nav class="col-sm-3　col-4" id="myScrollspy">
　　　　　　<ul class="nav nav-pills flex-column">
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a　class="nav-link active" href="#section1">Section　1</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a　class="nav-link" href="#section2">Section　2</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a　class="nav-link" href="#section3">Section　3</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item dropdown">
　　　　　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Section　4</a>
　　　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　　　<a　class="dropdown-item"　href="#section41">Link　1</a>
　　　　　　　　　　　　<a　class="dropdown-item"　href="#section42">Link　2</a>
　　　　　　　　　　</div>
　　　　　　　　</li>
　　　　　　</ul>
　　　　</nav>
　　　　<div　class="col-sm-9　col-8">
　　　　　　<div　id="section1"　class="bg-success">　　　　
　　　　　　　　<h1>Section　1</h1>
　　　　　　　　<p>이 부분을 스크롤하여 스크롤할 때 네비게이션 목록을 확인하세요!>/p>
　　　　　　</div>
　　　　　　<div　id="section2"　class="bg-warning">　
　　　　　　　　<h1>Section　2</h1>
　　　　　　　　<p>이 부분을 스크롤하여 스크롤할 때 네비게이션 목록을 확인하세요!>/p>
　　　　　　</div>　　　　　　　　
　　　　　　<div　id="section3"　class="bg-secondary">　　　　　　　　　
　　　　　　　　<h1>Section　3</h1>
　　　　　　　　<p>이 부분을 스크롤하여 스크롤할 때 네비게이션 목록을 확인하세요!>/p>
　　　　　　</div>
　　　　　　<div　id="section41"　class="bg-danger">　　　　　　　　　
　　　　　　　　<h1>Section　4-1</h1>
　　　　　　　　<p>이 부분을 스크롤하여 스크롤할 때 네비게이션 목록을 확인하세요!>/p>
　　　　　　</div>　　　　　　
　　　　　　<div　id="section42"　class="bg-info">　　　　　　　　　
　　　　　　　　<h1>Section　4-2</h1>
　　　　　　　　<p>이 부분을 스크롤하여 스크롤할 때 네비게이션 목록을 확인하세요!>/p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

테스트해 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

Bootstrap4 소형 도구 Bootstrap4 팝업