やりたい事

HTMLの要素ごとにスクロールを監視して、それぞれ指定の位置までスクロールしたら特定の処理(主に記事の読了完了等の計測)を走らせたい。
要素ごとにインスタンスが生成され、scroll監視が動く背景としては、JSフレームワークにanguler.jsを使用する為。
(今回はangulerの件には触れない)

要点は以下

  • インスタンスは固有のname属性と、offsetTopを持つ。
  • on(‘scroll’)でスクロールイベントを監視し、現在位置がそれぞれのインスタンスが持つoffsetTopにたどり着いたら、到達を知らせる特定の処理を走らせる。
  • 一度到達したらもう監視する必要がないので、イベント自体を消去する

つまった事

単純に

とすると、複数監視してるscrollイベントが全て消えてしまう。

namespaceを与えて消すにも、ページによっていくつインスタンスが作られるか不明、
またある程度の柔軟性を持たせたいのであんまり不要な処理を増やしたくない
(タイトルなどからnamespaceを動的に生成するとかはできるけど)

解決方法

offのパラメータに e  (イベントハンドラの引数)を渡すと、自分だけ消すことができる

これだっ!!(๑•̀ㅂ•́)و✧

 

サンプルコード

これで無事、offsetTopにたどりついたイベントから結果を吐いて止まってくれました。

わざわざフラグ変数持たせて一度通ったら二度と通らないような判定をしてる所もありましたが、イベントが走るだけで負荷なので、使わないイベントはちゃんと止めてあげましょう。

 


http://astone.jeez.jp/wp-content/uploads/2015/12/259H.jpghttp://astone.jeez.jp/wp-content/uploads/2015/12/259H-150x150.jpgmilksoapProgrammingJavaScript,jQuery,off,on,イベントハンドラ
やりたい事 HTMLの要素ごとにスクロールを監視して、それぞれ指定の位置までスクロールしたら特定の処理(主に記事の読了完了等の計測)を走らせたい。 要素ごとにインスタンスが生成され、scroll監視が動く背景としては、JSフレームワークにanguler.jsを使用する為。 (今回はangulerの件には触れない) 要点は以下 インスタンスは固有のname属性と、offsetTopを持つ。 on('scroll')でスクロールイベントを監視し、現在位置がそれぞれのインスタンスが持つoffsetTopにたどり着いたら、到達を知らせる特定の処理を走らせる。 一度到達したらもう監視する必要がないので、イベント自体を消去する つまった事 単純に とすると、複数監視してるscrollイベントが全て消えてしまう。 namespaceを与えて消すにも、ページによっていくつインスタンスが作られるか不明、 またある程度の柔軟性を持たせたいのであんまり不要な処理を増やしたくない (タイトルなどからnamespaceを動的に生成するとかはできるけど) 解決方法 offのパラメータに e  (イベントハンドラの引数)を渡すと、自分だけ消すことができる これだっ!!(๑•̀ㅂ•́)و✧   サンプルコード これで無事、offsetTopにたどりついたイベントから結果を吐いて止まってくれました。 わざわざフラグ変数持たせて一度通ったら二度と通らないような判定をしてる所もありましたが、イベントが走るだけで負荷なので、使わないイベントはちゃんと止めてあげましょう。