chore: optimize calculating scrollbar width (#2063)

chore: optimize calculating scrollbar width --------- Co-authored-by: linwenping <[email protected]>
youzan · Jul 12, 2024 · 8df2fd0 · 8df2fd0
1 parent fd0d7f9
commit 8df2fd0
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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