Przewiń wydarzenie dla Meteor'a

Question

Nie mogłem znaleźć wydarzenia z przewijaniem dla meteorów w dokumentach meteorytów. Jak mam coś zrobić, gdy ktoś przewija okno w aplikacji meteorytowej?

Próbowałem już 'scroll window' : function(event) { ... }, który nie działa zgodnie z oczekiwaniami.

Answer 1

Ja też się tym zajmowałem.

Nie znalazłem sposobu, aby zrobić to czysto w ramach Template.template.events.

Obecnie oczywistym rozwiązaniem tymczasowym byłoby użycie prostego zdarzenia przewijania jQuery.

$(window).scroll(function(){//your code}); powinien załatwić sprawę.

Czego próbował użyć jako selektor ale bezskutecznie były:

'scroll *'

'scroll body'

'scroll document'

i naturalnie

'scroll window'

Próbowałem wszystkich tych selektorów wewnątrz zdarzeń ogólnego szablonu, wraz z wydarzeniami UI.body, ponieważ jest to nowy szablon blaze, który obejmuje treść strony.

Powtarzam: prawdopodobnie lepiej jest teraz używać jQuery.

Answer 2

Trochę za późno, ale wymyśliłem rozwiązanie; przynajmniej w kontekście mojego obecnego projektu.

Wdrażam D3 z Meteorem i chciałem niestandardowej funkcji zoom, która zmienia wymiary szablonu, gdy użytkownik przewija.

Tworzenie reaktywny zmienną 'zoom'

Template.graph.onCreated(function() { 
    var self = this; 
    self.zoom = new ReactiveVar(0); 
    $(window).on('scroll', function(e) { 
     // ... event processing stuff; 
     // say it produces value 'zoomAmount' ... 
     self.zoom.set(zoomAmount); 
    } 
}); 

Tworzenie pomocnika, który zwraca zoom. Odwołaj go do szablonu DOM w ukrytym elemencie, aby był reaktywny.

Answer 3

Jako częściowe rozwiązanie, można posłuchać zdarzenia mousewheel na dowolnym elemencie, który Cię interesuje. Wiele razy jest to dokładnie to, czego chcesz.

Jako przykład, następujący detektor zdarzeń uniemożliwi użytkownikowi przewijanie za pomocą kółka przewijania, ale nadal będzie mógł korzystać z paska nawigacji z boku strony. (Jeśli nie wyłączył go z overflowy: hidden;)

Template.body.events({ 
    'mousewheel': function(event, template) { 
     console.log("scrolled"); 
     return false; 
    } 
}); 

Answer 4

W Meteor nie ma natywne wsparcie szablon dla zdarzeń przewijania, więc trzeba zrobić w swoim Template.name.onRendered zwrotnego. Jednak dostaniesz wyciek pamięci, jeśli nie usuniesz go z Template.name.onDestroyed. Najlepiej jest to zrobić w przypadku zdarzeń o przestrzeni nazw, ponieważ coś takiego jak $(window).off('scroll'); odłączy wszystkie zdarzenia przewijania od okna.

import { $ } from 'jquery'; 

Template.myTemplateName.onRendered(function(){ 
    // You can do this multiple times 
    $(window).on('scroll.whateverNamespace', function() { ... }); 
    $(window).on('scroll.whateverNamespace', function() { ... }); 
}) 

Template.myTemplateName.onDestroyed(function(){ 
    $(window).off('scroll.whateverNamespace'); 
})