Q&A
特定の要素が画面の真ん中にきた時のみ、処理をするようにしたいです。
下記例としてhoge3が画面真ん中にきたら、JavaScriptで処理をしたいのですがどのようにしたら要素が真ん中にきたことを判断できるでしょうか？
初心者のためざっくりとした質問で恐縮ですが、ご教授いただきたいです。
※hoge1~hoge3はheightが指定されていて初期描画時にはhoge2,hoge3は画面内に表示されていません。またJqueryなどは使用せずvanilaで実装したいです。
html
1<div class="hoge1"> 2 <p>hoge1</p> 3</div> 4<div class="hoge2"> 5 <p>hoge2</p> 6</div> 7<div class="hoge3"> 8 <p>hoge3</p> 9</div>
回答2件
0
ベストアンサー
「特定の要素が画面の真ん中」がDOM中のノードの順番で真ん中という意味で良いと仮定しています。
以下のコードのHTMLをブラウザで表示し、
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <script> 7 document.addEventListener('DOMContentLoaded', () => { 8 const observable = document.querySelector('#observable'); 9 const observer = new MutationObserver((mutationsList, o) => { 10 const nodes = observable.querySelectorAll('div[class^=hoge]'); 11 if (nodes[Math.floor(nodes.length / 2)].classList.contains('hoge3')) { 12 console.log('hoge3 is center now!'); 13 } 14 }); 15 observer.observe(observable, {childList: true,}); 16 }); 17 </script> 18</head> 19 20<body> 21 <div id="observable"> 22 <div class="hoge1"> 23 <p>hoge1</p> 24 </div> 25 <div class="hoge2"> 26 <p>hoge2</p> 27 </div> 28 <div class="hoge3"> 29 <p>hoge3</p> 30 </div> 31 </div> 32</body> 33 34</html>
コンソールから
javascript
1node = document.querySelector('#observable') 2node.insertBefore(node.children[2],node.children[1])
などとすれば、コンソールに
text
1hoge3 is center now!
と表示されます
投稿2021/10/18 17:22
編集2021/10/18 17:24
退会済みユーザー
総合スコア0
0
JavaScriptの
Intersection Observer API
は検討しましたか？
ある要素が特定の領域と交差したかを監視することができるAPIです。
使えるかどうか調べてみてください。
投稿2021/10/17 21:05
総合スコア7337
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。