CODEWITHSUNDEEP
famo.us
Byungho Lee
Byungho Lee

Reputation: 13

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

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

Upvotes: 1

Views: 188

Answers (1)

johntraver
johntraver

Reputation: 3612

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

Upvotes: 2

Related Questions