diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts
new file mode 100644
index 00000000000..4782ad6d060
--- /dev/null
+++ b/public/app/core/components/scroll/page_scroll.ts
@@ -0,0 +1,37 @@
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+
+export function pageScrollbar() {
+  return {
+    restrict: 'A',
+    link: function(scope, elem, attrs) {
+      let lastPos = 0;
+
+      appEvents.on(
+        'dash-scroll',
+        evt => {
+          if (evt.restore) {
+            elem[0].scrollTop = lastPos;
+            return;
+          }
+
+          lastPos = elem[0].scrollTop;
+
+          if (evt.animate) {
+            elem.animate({ scrollTop: evt.pos }, 500);
+          } else {
+            elem[0].scrollTop = evt.pos;
+          }
+        },
+        scope
+      );
+
+      scope.$on('$routeChangeSuccess', () => {
+        lastPos = 0;
+        elem[0].scrollTop = 0;
+      });
+    },
+  };
+}
+
+coreModule.directive('pageScrollbar', pageScrollbar);
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 353d8762a9a..fb7021fe883 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -47,6 +47,7 @@ import { NavModelSrv, NavModel } from './nav_model_srv';
 import { userPicker } from './components/user_picker';
 import { teamPicker } from './components/team_picker';
 import { geminiScrollbar } from './components/scroll/scroll';
+import { pageScrollbar } from './components/scroll/page_scroll';
 import { gfPageDirective } from './components/gf_page';
 import { orgSwitcher } from './components/org_switcher';
 import { profiler } from './profiler';
@@ -85,6 +86,7 @@ export {
   userPicker,
   teamPicker,
   geminiScrollbar,
+  pageScrollbar,
   gfPageDirective,
   orgSwitcher,
   manageDashboardsDirective,
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html
index a3d5a4439ee..d07127b0115 100644
--- a/public/app/partials/dashboard.html
+++ b/public/app/partials/dashboard.html
@@ -1,8 +1,8 @@
 <div dash-class ng-if="ctrl.dashboard">
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
-	<div class="scroll-canvas scroll-canvas--dashboard">
-		<div grafana-scrollbar>
+	<div class="scroll-canvas scroll-canvas--dashboard" page-scrollbar>
+		<div>
 			<dashboard-settings dashboard="ctrl.dashboard"
 													ng-if="ctrl.dashboardViewState.state.editview"
 													class="dashboard-settings">
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 031192dd984..a19e0072518 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -74,6 +74,7 @@
 
 .graph-legend-scroll {
   position: relative;
+  overflow: auto !important;
 }
 
 .graph-legend-icon {
diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss
index 4bd0807bb0b..d8d698e73a6 100644
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@@ -106,22 +106,16 @@
   opacity: 0.9;
 }
 
-// Srollbars
+// Scrollbars
 //
 
-// ::-webkit-scrollbar {
-//   width: 8px;
-//   height: 8px;
-// }
-
-// ::-webkit-scrollbar:hover {
-//   height: 8px;
-// }
-
 ::-webkit-scrollbar {
-  // Hide system scrollbar (Mac OS X)
-  width: 0;
-  height: 0;
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar:hover {
+  height: 8px;
 }
 
 ::-webkit-scrollbar-button:start:decrement,
diff --git a/public/views/index.template.html b/public/views/index.template.html
index 4cb4a0d57ce..9f151527b88 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -40,8 +40,7 @@
     </div>
 
     <div class="main-view">
-      <!-- Not sure do we really need grafana-scrollbar here? -->
-      <div class="scroll-canvas" grafana-scrollbar>
+      <div class="scroll-canvas">
         <div ng-view></div>
 
         <footer class="footer">