JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <input id="foo" type="text">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <input id="bar" type="text">
    </body>
</html>

JavaScript

(function($) {
    $.extend($.expr[':'], {

        inView: function(element) {
            var $element = $(element);
            if ($element.is(":hidden")) {
                return false;
            }

            var $window = $(window);
            var docViewTop = $window.scrollTop();
            var docViewBottom = docViewTop + $window.height();
            var elemTop = $element.offset().top;
            var elemBottom = elemTop + $element.height();

            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }

    });

})(jQuery);


$(function() {
    alert($("input:inView").length);
});