Final adjustments on quickSwitch

Packages/ohif-core/client/components/scrollArea/scrollArea.js

@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
 
 Template.scrollArea.onCreated(() => {
     const instance = Template.instance();
@@ -16,17 +17,20 @@ Template.scrollArea.onCreated(() => {
 
 Template.scrollArea.onRendered(() => {
     const instance = Template.instance();
-    const { config } = instance;
-    if (config.hideScrollbar) {
-        const $scrollable = instance.$('.scrollable').first();
-        const scrollable = $scrollable[0];
-        const x = config.scrollX ? 1 : 0;
-        const y = config.scrollY ? 1 : 0;
-        $scrollable.css({
-            'margin-right': 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
-            'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
-        });
-    }
+
+    instance.adjustMargins = _.throttle(() => {
+        const { config } = instance;
+        if (config.hideScrollbar) {
+            const $scrollable = instance.$('.scrollable').first();
+            const x = config.scrollX ? 1 : 0;
+            const y = config.scrollY ? 1 : 0;
+            const scrollbarSize = OHIF.ui.getScrollbarSize();
+            $scrollable.css({
+                'margin-right': 0 - (scrollbarSize[0]) * y,
+                'margin-bottom': 0 - (scrollbarSize[1]) * x
+            });
+        }
+    }, 150);
 
     instance.$scrollable = instance.$('.scrollable').first();
     instance.scrollHandler = _.throttle(event => {
@@ -50,9 +54,17 @@ Template.scrollArea.onRendered(() => {
         if (scrollTop + height < scrollHeight) {
             $scrollArea.addClass('can-scroll-down');
         }
-    }, 300);
+    }, 150);
 
     instance.scrollHandler();
+
+    instance.adjustMargins();
+    $(window).on('resize', instance.adjustMargins);
+});
+
+Template.scrollArea.onDestroyed(() => {
+    const instance = Template.instance();
+    $(window).off('resize', instance.adjustMargins);
 });
 
 Template.scrollArea.events({

Packages/ohif-core/client/components/scrollArea/scrollArea.styl

@@ -9,6 +9,7 @@ $scrollNavSize = 24px
   .scrollable
     max-height: inherit
     overflow: hidden
+    zoom: 1
 
     &.scroll-x
       overflow-x: scroll

Packages/ohif-core/client/lib/ui.js

@@ -26,3 +26,45 @@ OHIF.ui.getOffset = element => {
         top
     };
 };
+
+/**
+ * Get the vertical and horizontal scrollbar sizes
+ * Got from https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes
+ *
+ * @returns {Array} Array containing the scrollbar horizontal and vertical sizes
+ */
+OHIF.ui.getScrollbarSize = () => {
+    const inner = document.createElement('p');
+    inner.style.width = '100%';
+    inner.style.height = '100%';
+
+    const outer = document.createElement('div');
+    outer.style.position = 'absolute';
+    outer.style.top = '0px';
+    outer.style.left = '0px';
+    outer.style.visibility = 'hidden';
+    outer.style.width = '100px';
+    outer.style.height = '100px';
+    outer.style.overflow = 'hidden';
+    outer.appendChild(inner);
+
+    document.body.appendChild(outer);
+
+    const w1 = inner.offsetWidth;
+    const h1 = inner.offsetHeight;
+    outer.style.overflow = 'scroll';
+    let w2 = inner.offsetWidth;
+    let h2 = inner.offsetHeight;
+
+    if (w1 === w2) {
+        w2 = outer.clientWidth;
+    }
+
+    if (h1 === h2) {
+        h2 = outer.clientHeight;
+    }
+
+    document.body.removeChild(outer);
+
+    return [(w1 - w2), (h1 - h2)];
+};