Событие прокрутки для Meteor

Ответ 1

Я тоже возился с этим.

Я не нашел способ сделать это чисто в Template.template.events.

Очевидным временным решением прямо сейчас будет использование простого события прокрутки jQuery.

$(window).scroll(function(){//your code}); должен сделать трюк.

Вещи, которые я пытался использовать в качестве селектора, но безрезультатно:

'scroll *'

'scroll body'

'scroll document'

и, естественно,

'scroll window'

Я пробовал все эти селектора внутри общих событий шаблона вместе с событиями UI.body, так как это новый шаблон пламени, который охватывает тело страницы.

Повторить: вам, вероятно, сейчас лучше использовать jQuery.

Ответ 2

Это немного поздно, но я придумал решение; по крайней мере, в контексте моего текущего проекта.

Я реализую D3 с помощью Meteor, и мне нужна специальная функция масштабирования, которая изменяет размеры шаблона при прокрутке пользователя.

Создать реактивную переменную '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);
    }
});

Создайте помощник, который возвращает масштаб. Ссылка на него в шаблоне DOM в скрытом элементе, чтобы сделать его реактивным.

Template.graph.helpers({
    zoom: function() { 
        // This will be called when 'zoom' changes, 
        // so treat this as your events function
        return Template.instance().zoom.get(); 
    }
});

Ответ 3

В Meteor не существует встроенной поддержки шаблонов для событий прокрутки, поэтому вам нужно выполнить обратный вызов Template.name.onRendered. Однако вы потеряете утечку памяти, если не удалите ее из Template.name.onDestroyed. Это лучше всего делать с событиями с именами, поскольку что-то вроде $(window).off('scroll'); отделяет все события прокрутки от окна.

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

Ответ 4

В качестве частичного решения вы можете прослушивать событие mousewheel на любом элементе, о котором вы заботитесь. Много раз это именно то, что вы хотите в любом случае.

В качестве примера, следующий прослушиватель событий не позволит пользователю прокручиваться с помощью колесика прокрутки, но они все равно смогут использовать панель навигации на боковой стороне страницы. (Если вы не отключили его с помощью overflowy: hidden;)

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