Question

使用jQuery，我想改变当前窗口中所有元素的颜色。页面滚动，但我不希望从视图滚动的元素 - 我看不到 - 被着色 - 只有当前视图窗口中的元素。

Answer 1

这是一个实现https://stackoverflow.com/a/7557433/128165

代码的自定义jQuery选择器

$.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

尝试“：visible”选择器以仅选择可见元素

如何仅选择窗口中可见的元素

2 个答案: