--- a/light9/web/timeline-elements.html	Sat Jun 04 23:17:50 2016 +0000
+++ b/light9/web/timeline-elements.html	Sat Jun 04 23:56:05 2016 +0000
@@ -30,6 +30,9 @@
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
      }
+     light9-timeline-adjusters {
+         pointer-events: none; /* temporary */
+         }
     </style>
     <div>
       <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

--- a/light9/web/timeline.coffee	Sat Jun 04 23:17:50 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 23:56:05 2016 +0000
@@ -56,6 +56,7 @@
     @adjs = @makeZoomAdjs().concat(@persistDemo())
     @trackMouse()
     @bindKeys()
+    @bindWheelZoom()
 
   trackMouse: ->
     # not just for show- we use the mouse pos sometimes
@@ -72,6 +73,21 @@
 
         @$.dia.setMouse(@viewState.mouse.pos())
 
+  bindWheelZoom: ->
+    # tried d3.zoom but couldn't figure it out
+    zoom = d3.zoom()
+    zoom.filter ->
+      # LMB drag is for selection, but MMB can scroll
+      return !(event.type == 'mousedown' && event.button != 1)
+    zoom.extent([[0, 0], [196, 1]])
+    zoom.translateExtent([[0, 0], [196, 1]])
+    zoom.on 'zoom', (a,b,c) =>
+      xf = d3.event.transform
+      log('zoom', xf)
+      @viewState.zoomSpec.t1(xf.invertX(0))
+      @viewState.zoomSpec.t2(xf.invertX(@viewState.zoomSpec.duration()))
+    d3.select(@$.zoomed).call(zoom)
+
   animatedZoom: (newT1, newT2, secs) ->
     fps = 30
     oldT1 = @viewState.zoomSpec.t1()
@@ -90,11 +106,9 @@
     setTimeout(=>
         @viewState.zoomSpec.t1(newT1)
         @viewState.zoomSpec.t2(newT2)
-      , lastTime + 10)
-      
+      , lastTime + 10)  
     
   bindKeys: ->
-    
     shortcut.add "Ctrl+P", (ev) =>
       @$.music.seekPlayOrPause(@zoomInX.invert(@viewState.mouse.pos().e(1)))