отключить элементы 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")
}

с использованием кода из этот ответ stackoverflow я попытался создать сценарий, в котором все div-ы за кадром становятся синими, но только первыйодин становится синим

в настоящее время на этой странице есть 1024 деления, которые вызывают большие падения частоты кадров, и я подумал, есть ли способ отключить деления, пока они не находятся в фокусе окна?

вот 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%, он скрывает его.

anyпомощь оценена