不在屏幕上时禁用div元素

Question

https://jsfiddle.net/The95Chaps/730qnmbo/9/是我的小提琴

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};
if($('div').is(':offscreen')){
    $(this).css("background-color","blue")
}

使用this stackoverflow answer中的代码，我试图制作一个脚本，其中所有div在屏幕外都变成蓝色，但只有第一个变成蓝色

当前此页面上有1024个div，这会导致大的帧率下降，我在想，有没有一种方法可以在div不在窗口焦点时禁用div？

这是基本概念的sudocode：

$(document).keypress(function(){
    for(var i = 1; i<numberOfDivsOnPage+1;i++){
        if(div[i-1]=!InTheScreen){
            div[i-1].hide()
        }
        if(div[i-1]=InTheScreen){
            div[i-1].show()
        }
    }
})

我有个想法，它会检查div的位置，如果它大于100％，则会将其隐藏。

任何帮助表示赞赏