fix: Enable -webkit-scrollbar related css when there's no overlay scrollbar #14807

public/app/app.ts

@@ -19,6 +19,7 @@ import angular from 'angular';
 import config from 'app/core/config';
 import _ from 'lodash';
 import moment from 'moment';
+import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
 
 // add move to lodash for backward compatabiltiy
 _.move = (array, fromIndex, toIndex) => {
@@ -45,6 +46,7 @@ export class GrafanaApp {
   preBootModules: any[];
 
   constructor() {
+    addClassIfNoOverlayScrollbar('no-overlay-scrollbar');
     this.preBootModules = [];
     this.registerFunctions = {};
     this.ngModuleDependencies = [];

public/app/core/utils/scrollbar.ts

@@ -0,0 +1,40 @@
+// Slightly modified: https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
+// No "dom-css" dependancy
+let scrollbarWidth = null;
+
+export default function getScrollbarWidth() {
+  if (scrollbarWidth !== null) {
+    return scrollbarWidth;
+  }
+  /* istanbul ignore else */
+  if (typeof document !== 'undefined') {
+    const div = document.createElement('div');
+    const newStyles = {
+      width: '100px',
+      height: '100px',
+      position: 'absolute',
+      top: '-9999px',
+      overflow: 'scroll',
+      MsOverflowStyle: 'scrollbar'
+    };
+
+    Object.keys(newStyles).map(style => {
+      div.style[style] = newStyles[style];
+    });
+
+    document.body.appendChild(div);
+    scrollbarWidth = (div.offsetWidth - div.clientWidth);
+    document.body.removeChild(div);
+  } else {
+    scrollbarWidth = 0;
+  }
+  return scrollbarWidth || 0;
+}
+
+export const hasNoOverlayScrollbars = getScrollbarWidth() > 0;
+
+export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => {
+  if (hasNoOverlayScrollbars) {
+    htmlElement.classList.add(classname);
+  }
+};

public/sass/components/_scrollbar.scss

@@ -106,80 +106,79 @@
   opacity: 0.9;
 }
 
-// // Scrollbars
-// //
-//
-// ::-webkit-scrollbar {
-//   width: 8px;
-//   height: 8px;
-// }
-//
-// ::-webkit-scrollbar:hover {
-//   height: 8px;
-// }
-//
-// ::-webkit-scrollbar-button:start:decrement,
-// ::-webkit-scrollbar-button:end:increment {
-//   display: none;
-// }
-// ::-webkit-scrollbar-button:horizontal:decrement {
-//   display: none;
-// }
-// ::-webkit-scrollbar-button:horizontal:increment {
-//   display: none;
-// }
-// ::-webkit-scrollbar-button:vertical:decrement {
-//   display: none;
-// }
-// ::-webkit-scrollbar-button:vertical:increment {
-//   display: none;
-// }
-// ::-webkit-scrollbar-button:horizontal:decrement:active {
-//   background-image: none;
-// }
-// ::-webkit-scrollbar-button:horizontal:increment:active {
-//   background-image: none;
-// }
-// ::-webkit-scrollbar-button:vertical:decrement:active {
-//   background-image: none;
-// }
-// ::-webkit-scrollbar-button:vertical:increment:active {
-//   background-image: none;
-// }
-// ::-webkit-scrollbar-track-piece {
-//   background-color: transparent;
-// }
-//
-// ::-webkit-scrollbar-thumb:vertical {
-//   height: 50px;
-//   background: -webkit-gradient(
-//     linear,
-//     left top,
-//     right top,
-//     color-stop(0%, $scrollbarBackground),
-//     color-stop(100%, $scrollbarBackground2)
-//   );
-//   border: 1px solid $scrollbarBorder;
-//   border-top: 1px solid $scrollbarBorder;
-//   border-left: 1px solid $scrollbarBorder;
-// }
-//
-// ::-webkit-scrollbar-thumb:horizontal {
-//   width: 50px;
-//   background: -webkit-gradient(
-//     linear,
-//     left top,
-//     left bottom,
-//     color-stop(0%, $scrollbarBackground),
-//     color-stop(100%, $scrollbarBackground2)
-//   );
-//   border: 1px solid $scrollbarBorder;
-//   border-top: 1px solid $scrollbarBorder;
-//   border-left: 1px solid $scrollbarBorder;
-// }
-//
-// Baron styles
+// Scrollbars
+.no-overlay-scrollbar {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar:hover {
+    height: 8px;
+  }
 
+  ::-webkit-scrollbar-button:start:decrement,
+  ::-webkit-scrollbar-button:end:increment {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:horizontal:decrement {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:horizontal:increment {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:vertical:decrement {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:vertical:increment {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:horizontal:decrement:active {
+    background-image: none;
+  }
+  ::-webkit-scrollbar-button:horizontal:increment:active {
+    background-image: none;
+  }
+  ::-webkit-scrollbar-button:vertical:decrement:active {
+    background-image: none;
+  }
+  ::-webkit-scrollbar-button:vertical:increment:active {
+    background-image: none;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background: -webkit-gradient(
+      linear,
+      left top,
+      right top,
+      color-stop(0%, $scrollbarBackground),
+      color-stop(100%, $scrollbarBackground2)
+    );
+    border: 1px solid $scrollbarBorder;
+    border-top: 1px solid $scrollbarBorder;
+    border-left: 1px solid $scrollbarBorder;
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      color-stop(0%, $scrollbarBackground),
+      color-stop(100%, $scrollbarBackground2)
+    );
+    border: 1px solid $scrollbarBorder;
+    border-top: 1px solid $scrollbarBorder;
+    border-left: 1px solid $scrollbarBorder;
+  }
+}
+
+// Baron styles
 .baron {
   // display: inline-block; // this brakes phantomjs rendering (width becomes 0)
   overflow: hidden;