"Aの要素がinView(スクロールなどして視覚に入ること)したら任意の処理をさせる"、
そんなことを独自イベントで実現したく "inview"イベントを実装しようとしたのですが、うまく行きません。
うまくいかないというか、どのjQueryメソッドを使えば実現できるのかわかりません。
js
1// 独自イベント実装側 2var event = new $.Event('inview'); 3 4$('*').each(function(el) { 5 document.addEventListener('scroll', function() { 6 if( isInView( getAbsY( el ) ) ){ 7 $(el).trigger(event); 8 } 9 }); 10}); 11 12function getAbsY(el) { 13 return el.getBoundingClientRect().top + window.pageYOffset; 14} 15 16function isInView(y) { 17 var scrollTop = document.body.getBoundingClientRect().top * -1; 18 var judgeY = scrollTop + window.innerHeight - 50; 19 return judgeY >= y; 20} 21 22// 使い手側 23$(A).on('inview', function() { 24 ... do something ... 25});
一応↑このようにやってみたのですが、$('*')
の部分がどうしても気持ち悪く、
他に方法はないものかと思い質問を投げさせていただきました。
他に方法はありませんか?
よろしくおねがいいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。