Bài 23: Scrollspy trong Bootstrap 4

0
714

Xin chào các bạn, hôm nay trong bài này mình sẽ hướng dẫn các bạn về Scrollspy trong Bootstrap 4, đây là phần Bootstrap nâng cao nên khá khó nhé, nhưng ứng dụng của nó lại rất tuyệt vời, nên các bạn có thời gian hãy xem qua bài viết này của mình nhé.

Scrollspy là gì?

Đầu tiên, mình sẽ giải thích qua cho các bạn dễ hiểu và hình dung nhé. Scrollspy là khái niệm được sử dụng để tự động cập nhật các liên kết trong danh sách điều hướng dựa trên vị trí cuộn scroll của trang.

Ví dụ, chúng ta có 1 website bao gồm 5 phần A, B, C, D, E. Mỗi phần là các nội dung tương ứng. Bây giờ, các bạn đang ở nội dung đầu là A, mà muốn di chuyển nhanh đến các phần còn lại để xem nội dung, thì bằng việc dùng chuột cuộn trang và tìm rất mất thời gian, Scrollspy cung cấp 1 danh sách các liên kết link, khi kích vào link nào thì sẽ dẫn tới phần nội dung đó tương ứng. Và như thế người ta gọi là Scrollspy.

Cách tạo Scrollspy trong Bootstrap 4

Đầu tiên, Scrollspy là khái niệm liên quan tới cuộn trang cho toàn trang, nên ở thẻ <body>, các bạn cần sử dụng các thuộc tính điều hướng như sau:

  • data-spy=”scroll”: thuộc tính này giúp phần tử body sử dụng làm vùng có thể cuộn trang được.
  • data-target=”.navbar”: thuộc tính data-target với giá trị là tên class của thanh điều hướng. Cụ thể là thanh danh sách <nav> ở phía dưới. Việc này giúp đảm bảo thanh điều hướng được kết nối với vùng có thể cuộn.
  • data-offset=”50″: thuộc tính data-offset chỉ định số lượng pixel để bù trừ từ trên cùng khi tính toán vị trí cuộn.

Tiếp theo, chúng ta cần chuẩn bị 1 link danh sách với thẻ <nav>, bên trong là cặp thẻ danh sách <ul>, <li>. Các class cần sử dụng tương ứng như sau:

Cuối cùng, là chúng ta sẽ chuẩn bị các phần nội dung tương ứng cho từng link liên kết:

  • Lưu ý: các phần tử cuộn phải khớp với id của các liên kết bên trong các mục danh sách của thanh điều hướng. Ví dụ: <div id="section1"> phải khớp với <a href="#section1">

Ví dụ tổng quát:

Scrollspy cho Menu điều hướng dọc

Tương tự như cách tạo Scrollspy như trên, nhưng để tạo Menu điều hướng dọc, thì các bạn sử dụng khái niệm Navigation vertical, tức là tạo Menu dọc với class .nav-pills

Ví dụ:

Kết luận

OK, như vậy là mình đã hướng dẫn xong các bạn phần Scrollspy trong Bootstrap 4 rồi, đây là 1 khái niệm các bạn nên sử dụng nhiều để điều hướng các phần nội dung trên website giúp người dùng tương tác tốt, tìm nội dung nhanh hơn trên trang.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây