Как выбрать только элементы, видимые в окне

Question

Используя jQuery, я хочу изменить цвет всех элементов в текущем окне. Страница прокручивается, но я не хочу, чтобы элементы, прокручиваемые за пределами представления, которое я не вижу, были окрашены, только элементы в текущем окне просмотра.

Answer 1

Вот пользовательский селектор jQuery, реализующий код из https://stackoverflow.com/a/7557433/128165

$.expr[':'].inViewport = (function(){
    function isElementInViewport (el) {
        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
        );
    }

    return function(obj, index, meta, stack){
       return isElementInViewport(obj);
    };
})();

//usage
$(':inViewport').css('color','red'); // color every element fully inside viewport
$('p:inViewport').css('color','red'); // color every paragraph element fully inside viewport

Answer 2

Попробуйте ": видимый" селектор, чтобы выбрать только видимые элементы