scrollbar: use native scroll for page

public/app/core/components/scroll/page_scroll.ts

+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);

public/app/core/core.ts

@@ -47,6 +47,7 @@ import { NavModelSrv, NavModel } from './nav_model_srv';
 import { userPicker } from './components/user_picker';
 import { userPicker } from './components/user_picker';
 import { teamPicker } from './components/team_picker';
 import { teamPicker } from './components/team_picker';
 import { geminiScrollbar } from './components/scroll/scroll';
 import { geminiScrollbar } from './components/scroll/scroll';
+import { pageScrollbar } from './components/scroll/page_scroll';
 import { gfPageDirective } from './components/gf_page';
 import { gfPageDirective } from './components/gf_page';
 import { orgSwitcher } from './components/org_switcher';
 import { orgSwitcher } from './components/org_switcher';
 import { profiler } from './profiler';
 import { profiler } from './profiler';
@@ -85,6 +86,7 @@ export {
   userPicker,
   userPicker,
   teamPicker,
   teamPicker,
   geminiScrollbar,
   geminiScrollbar,
+  pageScrollbar,
   gfPageDirective,
   gfPageDirective,
   orgSwitcher,
   orgSwitcher,
   manageDashboardsDirective,
   manageDashboardsDirective,

public/app/partials/dashboard.html

 <div dash-class ng-if="ctrl.dashboard">
 <div dash-class ng-if="ctrl.dashboard">
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 	<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"
 			<dashboard-settings dashboard="ctrl.dashboard"
 													ng-if="ctrl.dashboardViewState.state.editview"
 													ng-if="ctrl.dashboardViewState.state.editview"
 													class="dashboard-settings">
 													class="dashboard-settings">

public/sass/components/_panel_graph.scss

@@ -74,6 +74,7 @@
 
 
 .graph-legend-scroll {
 .graph-legend-scroll {
   position: relative;
   position: relative;
+  overflow: auto !important;
 }
 }
 
 
 .graph-legend-icon {
 .graph-legend-icon {

public/sass/components/_scrollbar.scss

@@ -106,22 +106,16 @@
   opacity: 0.9;
   opacity: 0.9;
 }
 }
 
 
-// Srollbars
+// Scrollbars
 //
 //
 
 
-// ::-webkit-scrollbar {
-//   width: 8px;
-//   height: 8px;
-// }
-
-// ::-webkit-scrollbar:hover {
-//   height: 8px;
-// }
-
 ::-webkit-scrollbar {
 ::-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,
 ::-webkit-scrollbar-button:start:decrement,

public/views/index.template.html

@@ -40,8 +40,7 @@
     </div>
     </div>
 
 
     <div class="main-view">
     <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>
         <div ng-view></div>
 
 
         <footer class="footer">
         <footer class="footer">