2012-08-23 15 views
5

Moja strona zawiera przewijalną powierzchnię zawierającą wiele elementów. Każdy element uruchamia funkcję, gdy się unosi.Jak wykryć, kiedy użytkownik aktywnie przewija?

Moim problemem jest to, że jeśli użytkownik przewija w górę lub w dół za pomocą kółka myszy, funkcja wyzwala dla każdego elementu, nad którym kursor przewija się, gdy obszar przewija się pod spodem.

Czy istnieje sposób, że mogę wywołać funkcję po najechaniu tylko wtedy, gdy użytkownik nie będzie aktywnie przewijać?

jQuery wbudowany .scroll() nie wydaje się być tym, czego potrzebuję, ponieważ zdarzenie przewijania jest wyzwalane tylko po rozpoczęciu przewijania. Muszę wiedzieć, czy przewijanie jest "w toku", że tak powiem.


UPDATE: Oto mój bieżący kod:

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

Więc to, co chcę zrobić, to wyłączyć wszystko w .hover() jeśli użytkownik jest aktualnie przewijając stronę.

+0

Czy możemy to zrobić na przewijaniu touchpada? – kapil

Odpowiedz

3

chciałbym użyć setTimeout z rzetelnego czasu na mouseenter a następnie clearTimeout na mouseleave, co spowodowałoby małe opóźnienie na unosi, więc unoszą jedynie spowodowałoby, gdy użytkownik trzyma myszy nad elementem ustaw czas.

To będzie mam nadzieję, że zminimalizować problem przewijania. Może być lepsze rozwiązanie niż to, ale było to pierwsze, o czym pomyślałem.

EDIT

napisał ten przykład szybko, powinny działać prawidłowo:

$(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 
       }); 
      } 
     ); 
    }); 
}); 

Dla demo iść ten skrzypce: http://jsfiddle.net/sQVe/tVRwm/1/

To do ciebie, jak wiele z opóźnieniem ty chcę, użyłem 500 ms.

UWAGA

.each() nie jest potrzebna, można wywołać .hover() sprawie zbierania div razu. Zawarłem .each(), ponieważ nie wiem, czy chcesz zrobić coś więcej niż tylko wiązać zdarzenie najeżdżania.

+1

Sprytne obejście. – Cypher

+0

Czy to działa w połączeniu z '.hover() jQuery? Zobacz aktualizację mojego pytania. – daGUY

+0

@daGUY Z pewnością mogę zobaczyć mój zaktualizowany wpis. Wystarczy zaimplementować to w swoim kodzie. – sQVe

Powiązane problemy