質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

373閲覧

jQuery 独自イベント 実装方法について

findwkwk

総合スコア47

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2018/06/15 04:57

編集2022/01/12 10:55

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

一応↑このようにやってみたのですが、$('*')の部分がどうしても気持ち悪く、
他に方法はないものかと思い質問を投げさせていただきました。

他に方法はありませんか?
よろしくおねがいいたします。

miyabi_pudding👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

jQuery#trigger() を使ってみてはいかがでしょう。
http://api.jquery.com/trigger/

また、scrollイベントハンドラは一つで十分だと思います。

Re: findwkwk さん

投稿2018/06/15 11:43

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

$('*')の部分がどうしても気持ち悪く、

プラグイン化してみては?

【jquery プラグイン/作成】
https://qiita.com/rorono/items/11e5dbd53cb93edb8b4d

【jQueryプラグインの作り方 | てらこや.work】
https://www.terakoya.work/jquery-build-plugin/


また、対応ブラウザの問題はありますがinViewならIntersection Observerを使えば良いと思います。

【IntersectionObserverで要素が画面内に入ってきたかを判定する】
https://sbfl.net/blog/2017/07/04/javascript-intersection-observer/

【Intersection Observer が良さそうなので試してみた】
https://qiita.com/yamanoku/items/027308e23cfc69845d7e

投稿2018/06/16 08:00

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問