From 8df2fd036c8f3a5d977d2a348fd365b721750110 Mon Sep 17 00:00:00 2001
From: CFDylan <1024shuchong@gmail.com>
Date: Fri, 12 Jul 2024 15:24:34 +0800
Subject: [PATCH] chore: optimize calculating scrollbar width (#2063)

chore: optimize calculating scrollbar width
---------

Co-authored-by: linwenping <linwenping@youzan.com>
---
 .../placement/bottom-left-in-viewport.ts      |  4 +--
 .../popover/placement/top-left-in-viewport.ts |  4 +--
 packages/zent/src/portal/Portal.tsx           |  4 +--
 .../zent/src/utils/dom/measureScrollbar.ts    |  3 ++-
 packages/zent/src/utils/getScrollbarWidth.ts  | 25 -------------------
 5 files changed, 8 insertions(+), 32 deletions(-)
 delete mode 100644 packages/zent/src/utils/getScrollbarWidth.ts

diff --git a/packages/zent/src/popover/placement/bottom-left-in-viewport.ts b/packages/zent/src/popover/placement/bottom-left-in-viewport.ts
index 7ad0f3d32e..b7986381ce 100644
--- a/packages/zent/src/popover/placement/bottom-left-in-viewport.ts
+++ b/packages/zent/src/popover/placement/bottom-left-in-viewport.ts
@@ -1,7 +1,7 @@
 import { IPositionFunction } from '../position-function';
 import { prefix } from './prefix';
 import getViewportSize from '../../utils/dom/getViewportSize';
-import { SCROLLBAR_WIDTH } from '../../utils/getScrollbarWidth';
+import measureScrollbar from '../../utils/dom/measureScrollbar';
 
 /**
  * ---------
@@ -26,7 +26,7 @@ export const BottomLeftInViewport: IPositionFunction = ({
   return {
     style: {
       position: 'absolute',
-      left: x - offsetWidth - SCROLLBAR_WIDTH,
+      left: x - offsetWidth - measureScrollbar(),
       top: y,
     },
 
diff --git a/packages/zent/src/popover/placement/top-left-in-viewport.ts b/packages/zent/src/popover/placement/top-left-in-viewport.ts
index 556340a2bb..e10ae56330 100644
--- a/packages/zent/src/popover/placement/top-left-in-viewport.ts
+++ b/packages/zent/src/popover/placement/top-left-in-viewport.ts
@@ -1,7 +1,7 @@
 import { IPositionFunction } from '../position-function';
 import { prefix } from './prefix';
 import getViewportSize from '../../utils/dom/getViewportSize';
-import { SCROLLBAR_WIDTH } from '../../utils/getScrollbarWidth';
+import measureScrollbar from '../../utils/dom/measureScrollbar';
 
 /**
  * ---------
@@ -26,7 +26,7 @@ export const TopLeftInViewport: IPositionFunction = ({
   return {
     style: {
       position: 'absolute',
-      left: x - offsetWidth - SCROLLBAR_WIDTH,
+      left: x - offsetWidth - measureScrollbar(),
       top: y,
     },
 
diff --git a/packages/zent/src/portal/Portal.tsx b/packages/zent/src/portal/Portal.tsx
index b84e6ff2a9..bb3bea6310 100644
--- a/packages/zent/src/portal/Portal.tsx
+++ b/packages/zent/src/portal/Portal.tsx
@@ -12,11 +12,11 @@ import PurePortal, { IPurePortalProps } from './PurePortal';
 import { getNodeFromSelector, hasScrollbarY } from './util';
 import memorize from '../utils/memorize-one';
 import createElement from '../utils/dom/createElement';
-import { SCROLLBAR_WIDTH } from '../utils/getScrollbarWidth';
 import { setValueForStyles } from '../utils/style/CSSPropertyOperations';
 import { addEventListener } from '../utils/component/event-handler';
 import isBrowser from '../utils/isBrowser';
 import { useIsomorphicLayoutEffect } from '../utils/hooks/useIsomorphicLayoutEffect';
+import measureScrollbar from '../utils/dom/measureScrollbar';
 
 function diffStyle(prev: React.CSSProperties, next: React.CSSProperties) {
   const result: React.CSSProperties = {};
@@ -50,7 +50,7 @@ function patchElement(parent: HTMLElement) {
   } else {
     const { overflowY, paddingRight } = parent.style;
     const originalPadding = getComputedStyle(parent).paddingRight;
-    const newPadding = parseFloat(originalPadding || '0') + SCROLLBAR_WIDTH;
+    const newPadding = parseFloat(originalPadding || '0') + measureScrollbar();
     parent.style.overflowY = 'hidden';
     parent.style.paddingRight = `${newPadding}px`;
     const newMeta: IPatchMeta = {
diff --git a/packages/zent/src/utils/dom/measureScrollbar.ts b/packages/zent/src/utils/dom/measureScrollbar.ts
index 663d836fef..33f696a354 100644
--- a/packages/zent/src/utils/dom/measureScrollbar.ts
+++ b/packages/zent/src/utils/dom/measureScrollbar.ts
@@ -1,3 +1,4 @@
+import isBrowser from '../isBrowser';
 import createElement from './createElement';
 
 let scrollbarWidth = 0;
@@ -12,7 +13,7 @@ const scrollbarMeasure = {
 };
 
 export default function measureScrollbar() {
-  if (typeof document === 'undefined' || typeof window === 'undefined') {
+  if (!isBrowser) {
     return 0;
   }
   if (scrollbarWidth) {
diff --git a/packages/zent/src/utils/getScrollbarWidth.ts b/packages/zent/src/utils/getScrollbarWidth.ts
deleted file mode 100644
index 1de961cf15..0000000000
--- a/packages/zent/src/utils/getScrollbarWidth.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import isBrowser from './isBrowser';
-import createElement from './dom/createElement';
-
-const MEASURE_STYLE = {
-  position: 'absolute',
-  top: '-9999px',
-  width: '50px',
-  height: '50px',
-  overflow: 'scroll',
-};
-
-function getScrollbarWidth() {
-  if (!isBrowser) {
-    return 0;
-  }
-  const scrollDiv = createElement('div');
-  Object.assign(scrollDiv.style, MEASURE_STYLE);
-  document.body.appendChild(scrollDiv);
-  const scrollbarWidth =
-    scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
-  document.body.removeChild(scrollDiv);
-  return scrollbarWidth;
-}
-
-export const SCROLLBAR_WIDTH = getScrollbarWidth();