Question

我需要实现水平可滚动时间轴。我已经绘制了时间轴/网格/标尺等。我只需要上下移动鼠标滚轮来滚动时间轴（向后 - 过去/前进 - 未来）。

首先我需要抓住这个事件：但我发现的任何东西似乎都没有用。仅需要浏览器支持chrome / firefox（最新版本）。

这两个听众不会起作用：

var paper = new Raphael('raphael-paper');
// ...
paper.canvas.on('mousewheel', function(event) {     
    console.log(event);
});
// ...
paper.canvas.addEventListener('mousewheel', function(event) {
    console.log(event);
});

Answer 1

使用jQuery mousewheel plugin - jquery.mousewheel.js：

用法：

// Init
var paper = new Raphael('raphael-paper');

// When Page Loads
$(document).ready(function()
{
    // capture mouse wheel using bind
    $(paper.canvas).bind('mousewheel', function(event, delta, deltaX, deltaY) {
        console.log(delta, deltaX, deltaY);
    });

    // capture mouse wheel using the event helper
    $(paper.canvas).mousewheel(function(event, delta, deltaX, deltaY) {
        console.log(delta, deltaX, deltaY);
    });
});

如何使用RaphaelJs捕捉鼠标滚轮上/下事件

1 个答案: