scroll: use wheelpropagation. Ref #10772

Once the vertical scrollbar comes to its end position, it should
allow the page scroll bar to start scrolling.

public/app/core/components/ScrollBar/ScrollBar.tsx

@@ -7,7 +7,6 @@ export interface Props {
 }
 }
 
 
 export default class ScrollBar extends React.Component<Props, any> {
 export default class ScrollBar extends React.Component<Props, any> {
-
   private container: any;
   private container: any;
   private ps: PerfectScrollbar;
   private ps: PerfectScrollbar;
 
 
@@ -16,7 +15,9 @@ export default class ScrollBar extends React.Component<Props, any> {
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
-    this.ps = new PerfectScrollbar(this.container);
+    this.ps = new PerfectScrollbar(this.container, {
+      wheelPropagation: true,
+    });
   }
   }
 
 
   componentDidUpdate() {
   componentDidUpdate() {

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

@@ -6,7 +6,9 @@ export function geminiScrollbar() {
   return {
   return {
     restrict: 'A',
     restrict: 'A',
     link: function(scope, elem, attrs) {
     link: function(scope, elem, attrs) {
-      let scrollbar = new PerfectScrollbar(elem[0]);
+      let scrollbar = new PerfectScrollbar(elem[0], {
+        wheelPropagation: true,
+      });
       let lastPos = 0;
       let lastPos = 0;
 
 
       appEvents.on(
       appEvents.on(

public/app/features/panel/panel_directive.ts

@@ -100,7 +100,9 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
       // update scrollbar after mounting
       // update scrollbar after mounting
       ctrl.events.on('component-did-mount', () => {
       ctrl.events.on('component-did-mount', () => {
         if (ctrl.__proto__.constructor.scrollable) {
         if (ctrl.__proto__.constructor.scrollable) {
-          panelScrollbar = new PerfectScrollbar(panelContent[0]);
+          panelScrollbar = new PerfectScrollbar(panelContent[0], {
+            wheelPropagation: true,
+          });
         }
         }
       });
       });
 
 

public/app/plugins/panel/graph/legend.ts

@@ -246,6 +246,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           // Number of pixels the content height can surpass the container height without enabling the scroll bar.
           // Number of pixels the content height can surpass the container height without enabling the scroll bar.
           scrollYMarginOffset: 2,
           scrollYMarginOffset: 2,
           suppressScrollX: true,
           suppressScrollX: true,
+          wheelPropagation: true,
         };
         };
 
 
         if (!legendScrollbar) {
         if (!legendScrollbar) {