その要素は本当に「見えている」のか�〜要素の “visibility” に関する考察〜
はじまるよ〜！
自己紹介
趣味でやっていること
要素が見えているかなんて興味ないよ……という人います！？
FE開発において、要素が見えているかを判定したいときが実はけっこうある！！
FE開発において、要素が見えているかを判定したいときがある！
「見えている」
= 「ユーザーにとって見えている」
こういう定義でいきます🌝
要素が見えない！！！ってどんなとき？
思いを馳せてみてください
要素が「見えない」ときの代表パターン3つ
要素が「見えない」ときの代表パターン3つ
画面内にない
要素が「見えない」ときの代表パターン3つ
画面内にない
もともと見えない
要素が「見えない」ときの代表パターン3つ
画面内にない
もともと見えない
他の要素に覆われている
要素が「見えない」ときの代表パターン3つ
画面内にない
もともと見えない
他の要素に覆われている
ここを起点に
要素の”visibility”を考えます
順番に見ていきますよ〜！🌝🌝
要素の”visibility” その1
画面内に入ってるの？
要素の”visibility” その2
「もともと」見えるモンなの？？
visibilityの例
opacityやcontent-visibilityも関係する(後述)
要素の”visibility” その3
他の要素に覆われていないの？
要素の”visibility”には色々ある
→ 「見えている」を判定するときには、
どのレベルで判定するかを念頭において、
ロジックを書き分けないといけない！
ちょっと待ってよ！実際どう判定するのさ
ここを
見てみよう！
今日はなし😭
「もともと見えるモンなの？」の判定は
考えることが多い……
boxがない: display / content-visibility
透明: opacity
invisible: visibility
祖先要素も見ないとあかん😭
「もともと見えるモンなの？」の判定は
考えることが多い……
boxがない: display / content-visibility
透明: opacity
invisible: visibility
こんなにやるの！？！？
「それ自体、見えているか？」の判定にはcheckVisibility()が使える！
「動機: 要素がそれ自体見えているかの判定は考えることが多いので、全部まとめたやつがほしい！」
checkVisibility()で確認してくれるコト
✅
✅
✅
祖先要素も見てくれる🌝
checkVisibility()で確認してくれるコト
✅
✅
✅
祖先要素も見てくれる🌝
非対応ブラウザ向けには、
自分で実装しよう！
(テックタッチも自前でやってるヨ)
(w3cに実装の定義が載っているヨ)
(polyfillでもいいヨ)
でもさあ……
「そもそも見えているのか」を確認するだけじゃダメ
でもさあ……
「そもそも見えているのか」を確認するだけじゃダメ
「覆われていないか」を
見る必要がある
覆われているって何？？
覆われているを定義してみる
覆われているって何？？
覆われているを定義してみる
(定義の仕方で最適な判定の仕方が変わるので注意)
覆われていない
覆われている
「他の要素に覆われていないか？」の判定にelementsFromPoint()を使うアイデア
elementsFromPoint()を何点かに適用して判定！
だいたい5か所くらいでやってみよ〜！
覆われている
覆われていない
「他の要素に覆われていないか？」の判定にelementsFromPoint()を使うアイデア
elementsFromPoint()を何点かに適用して判定！
だいたい5か所くらいでやってみよ〜！
覆われている
覆われていない
これには落とし穴がある！
子要素に「覆われている」かも
ボタン要素が
子要素(画像やdiv)に「覆われている」
と判定されてしまう😭
子要素に「覆われている」かも
ボタン要素が
子要素(画像やdiv)に「覆われている」
と判定されてしまう😭
contains()も組み合わせる！
みんなも家でやってみてね🌝
まとめ
app.
「他の要素に覆われていないか？」の判定にはelementsFromPoint()とcontains()を使える！
shadow DOMに注意！
要素が「見えている」その3
内容は変わっていないか？
li要素のテキストが変わっているだけ。要素自体は使い回し。
しかし、見えなくなったように知覚される