Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Scrollspy: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu một tính năng thú vị của Bootstrap叫做 Scrollspy. Đừng lo lắng nếu bạn mới làm quen với lập trình - tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm với học sinh của mình trong nhiều năm qua. Vậy, hãy lấy một tách cà phê, và cùng bắt đầu nào!

Bootstrap - Scrollspy

Scrollspy là gì?

Trước khi chúng ta đi vào phần kỹ thuật, hãy cùng hiểu Scrollspy là gì. Hãy tưởng tượng bạn đang đọc một bài viết dài trên mạng, và khi bạn cuộn xuống, menu điều hướng tự động nổi bật phần bạn đang đọc. Đó chính là Scrollspy đang hoạt động! Đây là một tính năng nhỏ nhưng rất hữu ích, giúp nâng cao trải nghiệm người dùng bằng cách cung cấp phản hồi thị giác về vị trí hiện tại của người dùng trong nội dung.

Cách hoạt động

Scrollspy hoạt động bằng cách theo dõi vị trí cuộn của trang web của bạn và cập nhật trạng thái hoạt động của các mục điều hướng tương ứng. Nó giống như có một người nhỏ (vì vậy mới có tên là "spy"!) theo dõi vị trí bạn trên trang và thông báo cho menu điều hướng, "Hey, người dùng đang ở đây bây giờ!"

Hãy cùng nhìn vào một ví dụ cơ bản:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Phần 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Phần 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Phần 1</h4>
<p>...</p>
<h4 id="section2">Phần 2</h4>
<p>...</p>
</div>
</body>

Trong ví dụ này, chúng ta đang nói với Bootstrap để theo dõi vị trí cuộn (data-bs-spy="scroll") và cập nhật menu điều hướng trong #navbar-example. Khi bạn cuộn qua nội dung, mục điều hướng tương ứng sẽ được nổi bật.

Navbar

Một trong những cách sử dụng phổ biến nhất của Scrollspy là với navbar. Hãy cùng nhìn vào một ví dụ chi tiết hơn:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Đầu tiên</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Thứ hai</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">Tiêu đề đầu tiên</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Tiêu đề thứ hai</h4>
<p>...</p>
</div>

Trong ví dụ này, chúng ta có một navbar với hai liên kết. Khi bạn cuộn qua nội dung, mục navbar tương ứng sẽ được nổi bật. Nó giống như có một GPS cho trang web của bạn!

Navigation嵌套

Đôi khi, bạn có thể muốn có các mục điều hướng嵌套. Scrollspy cũng có thể xử lý điều này! Dưới đây là cách bạn làm:

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Mục 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Mục 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Mục 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Mục 2</a>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Mục 1</h4>
<p>...</p>
<h5 id="item-1-1">Mục 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Mục 1-2</h5>
<p>...</p>
<h4 id="item-2">Mục 2</h4>
<p>...</p>
</div>

Điều này tạo ra một cấu trúc điều hướng嵌套 mà sẽ được cập nhật khi bạn cuộn qua các phần và phụ phần. Nó giống như có các chương và phụ chương trong một cuốn sách, nhưng tương tác!

List Group

Scrollspy không chỉ giới hạn ở navbar. Bạn cũng có thể sử dụng nó với các nhóm danh sách:

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Mục 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Mục 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Mục 1</h4>
<p>...</p>
<h4 id="list-item-2">Mục 2</h4>
<p>...</p>
</div>

Điều này tạo ra một nhóm danh sách mà sẽ được cập nhật khi bạn cuộn qua nội dung. Nó giống như có một mục lục biết chính xác bạn đang ở đâu trong cuốn sách!

Simple Anchors

Đôi khi, bạn có thể muốn sử dụng các liên kết đơn giản thay vì một navbar hoặc nhóm danh sách đầy đủ:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav">
<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>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

Điều này tạo ra các liên kết đơn giản mà sẽ được cập nhật khi bạn cuộn. Nó giống như có các bookmark trên trang web của bạn mà sẽ sáng lên khi bạn đến chúng!

Elements Không hiển thị

Scrollspy thậm chí có thể hoạt động với các phần tử ban đầu không hiển thị:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<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>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="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>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

Trong ví dụ này, ngay cả khi một số phần tử ban đầu không hiển thị, Scrollspy vẫn sẽ hoạt động với chúng khi chúng xuất hiện trong tầm nhìn. Nó giống như có một người间谍 có thể nhìn thấy qua tường!

Sử dụng

Để sử dụng Scrollspy, bạn cần làm ba điều:

  1. Thêm data-bs-spy="scroll" vào phần tử bạn muốn theo dõi (thường là <body>).
  2. Thêm data-bs-target="#navId" để chỉ định navbar nào sẽ được sử dụng cho scrollspy.
  3. Thêm data-bs-offset="" để chỉ định số pixel cần offset từ trên cùng khi tính toán vị trí cuộn.

Dưới đây là bảng các thuộc tính dữ liệu bạn có thể sử dụng:

Thuộc tính Mô tả
data-bs-spy Kích hoạt scrollspy
data-bs-target Chỉ định navbar nào sẽ được sử dụng cho scrollspy
data-bs-offset Số pixel cần offset từ trên cùng khi tính toán vị trí cuộn
data-bs-method Tìm phần tử mà phần tử theo dõi đang ở trong

Options

Bạn cũng có thể khởi tạo Scrollspy bằng JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

Dưới đây là bảng các tùy chọn bạn có thể sử dụng:

Tùy chọn Kiểu Mặc định Mô tả
offset number 10 Số pixel cần offset từ trên cùng khi tính toán vị trí cuộn
method string 'auto' Tìm phần tử mà phần tử theo dõi đang ở trong
target string '' Chỉ định navbar nào sẽ được sử dụng cho scrollspy

CSS Properties

Scrollspy sử dụng một số thuộc tính CSS để hoạt động:

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

Các thuộc tính position: relative và overflow: auto là rất quan trọng để Scrollspy hoạt động chính xác.

Và thế là bạn đã có kiến thức để sử dụng tính năng Scrollspy của Bootstrap. Hãy nhớ, thực hành là cách tốt nhất để học, vì vậy đừng ngại thử nghiệm với các ví dụ này. Chúc bạn may mắn và cuộn网页 luôn mượt mà!

Credits: Image by storyset

Hướng Dẫn Trước:
Bootstrap - Thanh tiến trình
Hướng Dẫn Tiếp Theo:
Bootstrap - Trình xoay