Share Sử dụng thư viện Visible để kiểm tra thành phần có đang hiển thị trên màn hình

filiallion · 03/05/2019

Trong một số trường hợp các bạn muốn kiểm tra xem một thành phần nào đó có đang hiển thị trực quan trên màn hình hay không thì các bạn có thể sử dụng thư viện Visible để làm việc này. Một thành phần được gọi là hiển thị trực quan tức là nó đang nằm trên màn hình mà người dùng có thể nhìn thấy được bất kể vị trí thanh cuộn của trình duyệt đang nằm ở vị trí nào.

Các bạn cũng đừng nhầm lẫn với cách kiểm tra visible của jQuery, với jQuery thì visible là đề cập đến thành phần đang được ẩn hay hiện bằng CSS còn thư viện Visible là kiểm tra xem một thành phần có đang được người dùng nhìn thấy trên màn hình hay không.

Thư viện Visible là một plugin của jQuery, vì vậy các bạn cần phải tích hợp thư viện jQuery vào website trước khi sử dụng thư viện Visible, sau đó các bạn có thể tải thư viện Visible tại địa chỉ https://github.com/customd/jquery-visible.

Các bạn tích hợp thư viện Visible vào website với nội dung mã lệnh như sau:

HTML:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.visible.min.js"></script>

Và kiểm tra xem một thành phần nào đó có đang hiển thị hay không với dòng mã lệnh như sau:

JavaScript:

$('#visible').visible();

Với dòng mã lệnh như trên, thành phần có id là visible nếu đang hiển thị trên màn hình sẽ trả về giá trị true, ngược lại là false.

Các bạn có thể xem ví dụ thư viện Visible tại địa chỉ http://opensource.teamdf.com/visible/examples/demo-basic.html và tìm hiểu thêm tại địa chỉ https://github.com/customd/jquery-visible.

Share Sử dụng thư viện Visible để kiểm tra thành phần có đang hiển thị trên màn hình

filiallion

Administrator