【保存版】jQuery .is(':visible') が Chrome で非表示判定してしまう？原因と解決策を完全網羅

2024-05-23

jQuery の .is(":visible") セレクタは、要素が可視かどうかを判定するために使用されます。しかし、このセレクタが Google Chrome ブラウザで正しく動作しない場合があります。この問題は、いくつかの要因によって引き起こされる可能性があります。

原因

この問題の主な原因は以下の通りです。

CSS の影響: 要素が CSS プロパティ display: none または visibility: hidden で設定されている場合、.is(":visible") セレクタは false を返します。
要素の祖先要素: 要素の祖先要素が非表示の場合、その要素も非表示とみなされます。
Chrome のバグ: 過去の Chrome バージョンでは、.is(":visible") セレクタが誤動作するバグが存在しました。

解決策

この問題を解決するには、以下の方法を試すことができます。

CSS を確認する: 要素に display: none または visibility: hidden が設定されていないことを確認してください。
祖先要素を確認する: 要素の祖先要素が非表示になっていないことを確認してください。
jQuery の最新バージョンを使用する: 過去の Chrome バージョンのバグを修正するために、jQuery の最新バージョンを使用してください。
代替セレクタを使用する: .is(":visible") セレクタの代わりに、.css("display") !== "none" && .css("visibility") !== "hidden" などの CSS セレクタを使用することができます。

例

以下の例は、.is(":visible") セレクタと代替セレクタの使用例を示しています。

// `.is(":visible")` セレクタを使用する
if ($("#element").is(":visible")) {
  // 要素は可視
} else {
  // 要素は非表示
}

// 代替セレクタを使用する
if ($("#element").css("display") !== "none" && $("#element").css("visibility") !== "hidden") {
  // 要素は可視
} else {
  // 要素は非表示
}

補足

この問題は、比較的まれな問題ですが、発生するとデバッグが難しい場合があります。上記の解決策を試しても問題が解決しない場合は、jQuery コミュニティフォーラムなどで助けを求めることができます。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .is(":visible") Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="element1">可視な要素</div>
  <div id="element2" style="display: none;">非表示な要素</div>
  <div id="element3" style="visibility: hidden;">非表示な要素</div>

  <script>
    // `.is(":visible")` セレクタを使用する
    if ($("#element1").is(":visible")) {
      console.log("要素1は可視です");
    } else {
      console.log("要素1は非表示です");
    }

    // 代替セレクタを使用する
    if ($("#element2").css("display") !== "none" && $("#element2").css("visibility") !== "hidden") {
      console.log("要素2は可視です");
    } else {
      console.log("要素2は非表示です");
    }

    // 代替セレクタを使用する
    if ($("#element3").css("display") !== "none" && $("#element3").css("visibility") !== "hidden") {
      console.log("要素3は可視です");
    } else {
      console.log("要素3は非表示です");
    }
  </script>
</body>
</html>

出力

要素1は可視です
要素2は非表示です
要素3は非表示です

このコードでは、3つの要素が定義されています。

element1 は可視な要素です。
element2 は CSS プロパティ display: none で設定されているため、非表示な要素です。

このサンプルコードは、基本的な例です。実際のアプリケーションでは、より複雑なロジックが必要になる場合があります。

他の方法

JavaScript の offsetWidth と offsetHeight プロパティを使用する

要素の幅と高さを取得して、0 より大きい場合は可視、0 以下の場合は非表示と判定することができます。

if ($("#element").offsetWidth > 0 && $("#element").offsetHeight > 0) {
  // 要素は可視
} else {
  // 要素は非表示
}

jQuery の offsetParent() メソッドを使用する

要素の祖先要素の中で最も近い可視な要素を取得することができます。

if ($("#element").offsetParent() !== null) {
  // 要素は可視
} else {
  // 要素は非表示
}

jQuery UI の $.visible メソッドを使用する

jQuery UI プラグインには、.visible() メソッドが提供されています。このメソッドは、要素が可視かどうかを判定する際に、より多くの要因を考慮します。

if ($.fn.visible) {
  if ($("#element").visible()) {
    // 要素は可視
  } else {
    // 要素は非表示
  }
}

カスタム関数を使用する

上記の方法で問題が解決しない場合は、カスタム関数を作成して、要素が可視かどうかを判定することができます。この関数は、以下の要素を考慮する必要があります。

CSS プロパティ display と visibility
要素の祖先要素
ブラウザのスクロール位置
要素のオーバーフロー

function isElementVisible(element) {
  // CSS プロパティ `display` と `visibility` を確認する
  if (element.css("display") === "none" || element.css("visibility") === "hidden") {
    return false;
  }

  // 要素の祖先要素を確認する
  var parent = element.parent();
  while (parent) {
    if (parent.css("display") === "none" || parent.css("visibility") === "hidden") {
      return false;
    }
    parent = parent.parent();
  }

  // ブラウザのスクロール位置を確認する
  var scrollTop = $(window).scrollTop();
  var scrollLeft = $(window).scrollLeft();
  var elementTop = element.offset().top;
  var elementLeft = element.offset().left;
  var elementHeight = element.outerHeight();
  var elementWidth = element.outerWidth();

  if (elementTop < scrollTop || elementLeft < scrollLeft ||
      elementTop + elementHeight > scrollTop + $(window).height() ||
      elementLeft + elementWidth > scrollLeft + $(window).width()) {
    return false;
  }

  // 要素のオーバーフローを確認する
  if (element.css("overflow") === "hidden") {
    var childElements = element.children();
    for (var i = 0; i < childElements.length; i++) {
      var childElement = childElements[i];
      var childElementTop = $(childElement).offset().top;
      var childElementLeft = $(childElement).offset().left;
      var childElementHeight = $(childElement).outerHeight();
      var childElementWidth = $(childElement).outerWidth();

      if (childElementTop < elementTop || childElementLeft < elementLeft ||
          childElementTop + childElementHeight > elementTop + elementHeight ||
          childElementLeft + childElementWidth > elementLeft + elementWidth) {
        return false;
      }
    }
  }

  // 要素は可視
  return true;
}