2012-08-23 3 views
5

マイページには、いくつかの要素を含むスクロール可能領域があります。各要素は、ホバリングされたときに関数をトリガーします。ユーザーがアクティブにスクロールしているときはどうすれば検出できますか?

私の問題は、ユーザーがマウスホイールを使って上下にスクロールすると、エリアがスクロールするときにカーソルが通過するすべての要素に対して、関数がトリガされるということです。

ユーザーが積極的にスクロールしていない場合のみ、ホバー上で機能トリガーを使用できる方法はありますか?

jQueryのビルトイン.scroll()は、スクロールが開始されたときにのみスクロールイベントが発生するため、必要なものではないようです。スクロールが「進行中」であるかどうかを知る必要があります。


UPDATE:ユーザーが現在のページをスクロールしている場合

$container.find('div.item').each(function(i, e){ 
    $(e).hover(
      function(){ 
       $(this).toggleClass('expanded'); 
       // other functions here 
      }, 
      function(){ 
       $(this).toggleClass('expanded'); 
      } 
    ); 
}); 

だから私は何をしたいのか.hover()で無効にすべてのものである:ここに私の現在のコードです。

+0

タッチパッドのスクロールでこれを行うことはできますか? – kapil

答えて

3

私はホバー上小さな遅延を作成することになる、mouseleavemouseenter、その後clearTimeoutに公正時間でsetTimeoutを使用することになり、ユーザは用要素の上にマウス彼を保持しているときホバーにのみトリガーします設定時間。

うまくいけば、はスクロールの問題を最小限に抑えます。これより良い解決策があるかもしれませんが、それは私が考えた最初のものでした。

EDIT

はすぐにこの例を書いて、正常に動作する必要があります:

$(function() { 
    "use strict"; 
    var $container = $("#container"), 
     timeout, self; 

    $container.find("div").each(function() { 
     $(this).hover(
      function() { 
       self = this; 
       timeout = setTimeout(function() { 
        $(self).css({ 
         width : 500, 
         height: 500 
        }); 
       }, 500); 
      }, 
      function() { 
       clearTimeout(timeout); 
       $(this).css({ 
        width : 300, 
        height: 300 
       }); 
      } 
     ); 
    }); 
}); 

デモで、このフィドルに行く:http://jsfiddle.net/sQVe/tVRwm/1/

どのように遅延あなたの多くのそれはあなた次第です私は500msを使いました。

NOTE

.each()が必要とされていない、あなたはすぐにdivコレクションに.hover()を呼び出すことができます。私は.each()を含んでいました。ホバーイベントをバインドする以外のことをしたいのか分かりません。

+1

賢明な回避策。 – Cypher

+0

これはjQueryの '.hover()'と組み合わせて使用​​できますか?私の質問への更新を見てください。 – daGUY

+0

@daGUY確かに、私の更新されたポストを見ることができます。コード内に実装するだけです。 – sQVe

関連する問題