JointJS Zooming

HTML

<script src="http://jointjs.com/js/joint.js"></script>
<link rel="stylesheet" href="http://jointjs.com/css/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
    display: inline-block;
    border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 400,
    model: graph
});

(new joint.shapes.basic.Rect).position(100, 100).resize(100, 100).addTo(graph);
(new joint.shapes.basic.Circle).position(300, 150).resize(100, 100).addTo(graph);

$('#paper').on('scroll', function (evt) {
		alert('here')

    evt.preventDefault();
    var p = clientToLocalPoint({
        x: evt.clientX,
        y: evt.clientY
    });
    var delta = Math.max(-1, Math.min(1, (evt.originalEvent.wheelDelta || -evt.originalEvent.detail)));
    var currentScale = V(paper.viewport).scale().sx;
    var newScale = currentScale + delta / 50;

    if (newScale > 0.4 && newScale < 2) {
        paper.setOrigin(0, 0);
        paper.scale(newScale, newScale, p.x, p.y);
    }
});


// Transform client coordinates to the paper local coordinates.
// Useful when you have a mouse event object and you'd like to get coordinates
// inside the paper that correspond to `evt.clientX` and `evt.clientY` point.
// Exmaple: var paperPoint = paper.clientToLocalPoint({ x: evt.clientX, y: evt.clientY });
function clientToLocalPoint(p) {

      var svgPoint = paper.svg.createSVGPoint();
      svgPoint.x = p.x;
      svgPoint.y = p.y;

    // This is a hack for Firefox! If there wasn't a fake (non-visible) rectangle covering the
    // whole SVG area, `$(paper.svg).offset()` used below won't work.
    var fakeRect = V('rect', {
        width: paper.options.width,
        height: paper.options.height,
        x: 0,
        y: 0,
        opacity: 0
    });
    V(paper.svg).prepend(fakeRect);

    var paperOffset = $(paper.svg).offset();

    // Clean up the fake rectangle once we have the offset of the SVG document.
    fakeRect.remove();

    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

    svgPoint.x += scrollLeft - paperOffset.left;
   ...