Fix scroll width calculation fail (#385)

future-architect · Oct 4, 2022 · 6b7be4d · 6b7be4d
1 parent e1839fd
commit 6b7be4d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/packages/cheetah-grid/package.json b/packages/cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",

diff --git a/packages/cheetah-grid/src/js/internal/style.ts b/packages/cheetah-grid/src/js/internal/style.ts
@@ -1,18 +1,24 @@
-function getScrollBarWidth(): number {
-  const dummy = document.createElement("div");
-  const { style } = dummy;
-  style.position = "absolute";
-  style.height = "9999px";
-  style.width = "calc(100vw - 100%)";
-  style.opacity = "0";
-  dummy.textContent = "x";
-  document.body.appendChild(dummy);
-  const { width } = (document.defaultView || window).getComputedStyle(
-    dummy,
-    ""
-  );
-  document.body.removeChild(dummy);
-  return parseInt(width, 10);
+function getScrollBarWidth() {
+  const wrapper = document.createElement("div");
+  const inner = document.createElement("div");
+  const { style: wrapperStyle } = wrapper;
+  wrapperStyle.position = "fixed";
+  wrapperStyle.height = "50px";
+  wrapperStyle.width = "50px";
+  wrapperStyle.overflow = "scroll";
+  wrapperStyle.opacity = "0";
+  wrapperStyle.pointerEvents = "none";
+
+  const { style } = inner;
+  style.height = "100%";
+  style.width = "100%";
+  inner.textContent = "x";
+  wrapper.appendChild(inner);
+  document.body.appendChild(wrapper);
+  const wrapperWidth = wrapper.getBoundingClientRect().width;
+  const innerWidth = inner.getBoundingClientRect().width;
+  document.body.removeChild(wrapper);
+  return Math.ceil(wrapperWidth - innerWidth);
 }
 
 let SCROLLBAR_SIZE: number;

diff --git a/packages/vue-cheetah-grid/package.json b/packages/vue-cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Cheetah Grid for Vue.js",
   "main": "lib/index.js",
   "unpkg": "dist/vueCheetahGrid.js",