[解決済み] ある要素が画面外にあるかどうかを確認する方法

質問

DIV要素が画面外に落ちていないか、jQueryでチェックしたい。要素はCSS属性にしたがって可視化され表示されていますが、意図的に画面外に配置される可能性があるため

position: absolute; 
left: -1000px; 
top: -1000px;

私はjQueryの :visible セレクタを使用することができませんでした。

私は何も派手なことはしていません。この絶対位置配置は、私の Ajax フレームワークが、いくつかのウィジェットの非表示/表示を実装している方法です。

どのように解決するのですか？

あなたの定義する「オフスクリーン」が何であるかに依存します。それはビューポート内なのか、それともページの定義された境界内なのでしょうか?

使用方法 Element.getBoundingClientRect()を使用します。 を使用すると、要素がビューポートの境界内にあるかどうか（つまり、画面上または画面外）を簡単に検出することができます。

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)
         );
};

そうすると、いくつかの方法でそれを使うことができます。

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');