fix: remove UA sniffing as it doesn't work and switch to feature dete…

…ction instead
Grsmto · Oct 17, 2019 · fbb5d3e · fbb5d3e
1 parent c52057d
commit fbb5d3e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/packages/simplebar/src/scrollbar-width.js b/packages/simplebar/src/scrollbar-width.js
@@ -10,11 +10,7 @@ window.addEventListener('resize', () => {
 
 export default function scrollbarWidth() {
   if (cachedScrollbarWidth === null) {
-    if (
-      typeof document === 'undefined' ||
-      /AppleWebKit/.test(navigator.userAgent) ||
-      'scrollbarWidth' in document.documentElement.style
-    ) {
+    if (typeof document === 'undefined') {
       cachedScrollbarWidth = 0;
       return cachedScrollbarWidth;
     }

diff --git a/packages/simplebar/src/simplebar.css b/packages/simplebar/src/simplebar.css
@@ -57,7 +57,8 @@
   scrollbar-width: none;
 }
 
-.simplebar-content-wrapper::-webkit-scrollbar {
+.simplebar-content-wrapper::-webkit-scrollbar,
+.simplebar-hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
 
@@ -206,7 +207,3 @@
   overflow-y: scroll;
   scrollbar-width: none;
 }
-
-.simplebar-hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
diff --git a/packages/simplebar/src/simplebar.js b/packages/simplebar/src/simplebar.js
@@ -150,7 +150,7 @@ export default class SimpleBar {
     if (canUseDOM) {
       this.initDOM();
 
-      this.scrollbarWidth = scrollbarWidth();
+      this.scrollbarWidth = this.getScrollbarWidth();
 
       this.recalculate();
 
@@ -579,7 +579,7 @@ export default class SimpleBar {
 
   onWindowResize = () => {
     // Recalculate scrollbarWidth in case it's a zoom
-    this.scrollbarWidth = scrollbarWidth();
+    this.scrollbarWidth = this.getScrollbarWidth();
 
     this.hideNativeScrollbar();
   };
@@ -823,6 +823,19 @@ export default class SimpleBar {
     return this.contentWrapperEl;
   }
 
+  getScrollbarWidth() {
+    // Detect Chrome/Firefox and do not calculate
+    if (
+      getComputedStyle(this.contentWrapperEl, '::-webkit-scrollbar').display ===
+        'none' ||
+      'scrollbarWidth' in document.documentElement.style
+    ) {
+      return 0;
+    } else {
+      return scrollbarWidth();
+    }
+  }
+
   removeListeners() {
     // Event listeners
     if (this.options.autoHide) {