[ Cách kiểm tra 1 element đang có trên màn hình hiển thị hay không bằng jQuery ]

Kiểm tra 1 element đang có trên màn hình hiển thị hay không bằng  jquery:

Các bài toán có thể áp dụng:

• Thực hiện chức năng tải thêm bài viết khi scroll đến cái button cuối danh sách bài viết.
• Xử lý 1 vài sự kiện khi màn hình scroll phần tử bạn cần xử lý chức năng,…

Nói nôm na rằng: chức năng này sẽ giúp bạn xác định được trên màn hình của PC hoặc mobile “đang scroll hoặc resize” nó có chứa phần tử mà bạn muốn kiểm tra hay không. Có thể là 1 button, 1 đoạn mã có class hoặc id do bạn quy định,…

Code jQuery kiểm tra phần tử hiển thị

//code check element có đang hiển thị trong màn hình không...
jQuery.fn.isInViewport = function() {
        var elementTop = jQuery(this).offset().top;
        var elementBottom = elementTop + jQuery(this).outerHeight();
        var viewportTop = jQuery(window).scrollTop();
        var viewportBottom = viewportTop + jQuery(window).height();
        return elementBottom > viewportTop && elementTop < viewportBottom;
  };

//cách sử dụng
  $(window).on('resize scroll', function () {
        if ($('.misha_loadmore').isInViewport()) {
            console.log('yesssss 1');
            //làm gì đó nếu thẻ có class .misha_loadmore ở trong màn hình đang hiển thị...
        } else {
            console.log('noooooooo 2');
            //ko có gì :))
        }
    });

Giải thích sơ bộ về code: .misha_loadmore là class của 1 button mà chúng tôi tiến hành xử lý code.

Code này có thể sử dụng được cho cả PC và mobile. Chúc các bạn xử lý được nhiều chức năng nhẹ nhàng hơn với bài hướng dẫn của mình.