diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts
index f48d941a8ba..09326de6481 100644
--- a/public/app/core/components/grafana_app.ts
+++ b/public/app/core/components/grafana_app.ts
@@ -122,6 +122,18 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
         body.toggleClass('page-kiosk-mode');
       });
 
+      var ticking = false;
+      window.addEventListener('scroll', function(e) {
+        if (!ticking) {
+          ticking = true;
+          setTimeout(function() {
+            appEvents.emit('scroll');
+            ticking = false;
+          }, 100);
+        }
+        ticking = true;
+      });
+
       // handle in active view state class
       var lastActivity = new Date().getTime();
       var activeUser = true;
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 63fdba693cb..c7ccbb62eab 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -4,6 +4,7 @@ import angular from 'angular';
 import $ from 'jquery';
 import _ from 'lodash';
 import Drop from 'tether-drop';
+import {appEvents} from 'app/core/core';
 
 var module = angular.module('grafana.directives');
 
@@ -196,7 +197,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         }
       };
 
-      $document.on('scroll', refreshOnScroll);
+      appEvents.on('scroll', refreshOnScroll, scope);
 
       scope.$on('$destroy', function() {
         elem.off();
diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts
index 9ea5e96654d..314258be21e 100644
--- a/public/app/headers/common.d.ts
+++ b/public/app/headers/common.d.ts
@@ -72,3 +72,4 @@ declare module 'd3' {
   var d3: any;
   export default d3;
 }
+