How can i catch mouse wheel direction using famo.us scrollSync? - famo.us

Question

I want to know wheel direction using "famo.us" scrollSync.
but i can't search exact solution.
my code is below. please give me a solution.
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var ScrollSync = require("famous/inputs/ScrollSync");
var mainContext = Engine.createContext();
var start = 0;
var update = 0;
var end = 0;
var scrollSync = new ScrollSync(function() {
return [0,0];
});
Engine.pipe(scrollSync);
var contentTemplate = function() {
return "<div>Start Count: " + start + "</div>" +
"<div>End Count: " + end + "</div>" +
"<div>Update Count: " + update + "</div>";
};
var surface = new Surface({
size: [undefined, undefined],
classes: ['grey-bg'],
content: contentTemplate()
});
scrollSync.on("start", function() {
surface.setContent(contentTemplate());
});
scrollSync.on("update", function(data) {
surface.setContent(contentTemplate());
});
scrollSync.on("end", function() {
surface.setContent(contentTemplate());
});
mainContext.add(surface);

Answer 1

There are a couple things I did to get your code to work. First just use surface.pipe(scrollSync) to get events scroll sync, and next, actually update the variables for start, update, and end. I also added a direction variable where I inspect the delta property of the event to determine the direction you are moving your mousewheel.
Here is the example.. Hope it helps!
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var ScrollSync = require("famous/inputs/ScrollSync");
var mainContext = Engine.createContext();
var start = 0;
var update = 0;
var end = 0;
var direction = undefined;
var scrollSync = new ScrollSync();
var contentTemplate = function() {
return "<div>Start Count: " + start + "</div>" +
"<div>End Count: " + end + "</div>" +
"<div>Update Count: " + update + "</div>" +
"<div>Direction: " + direction + "</div>";
};
var surface = new Surface({
size: [undefined, undefined],
classes: ['grey-bg'],
content: contentTemplate()
});
surface.pipe(scrollSync);
scrollSync.on("start", function() {
start += 1;
surface.setContent(contentTemplate());
});
scrollSync.on("update", function(data) {
update += 1;
delta = data['delta'];
direction = delta[0] == 0 ? (delta[1] > 0 ? "down" : "up") : (delta[0] > 0 ? "right" : "left") ;
surface.setContent(contentTemplate());
});
scrollSync.on("end", function() {
end += 1;
surface.setContent(contentTemplate());
});
mainContext.add(surface);