fix: add calc scrollBarWidth logic into sidesheet open

packages/semi-ui/sideSheet/index.tsx

@@ -87,23 +87,32 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         super(props);
         this.state = { displayNone: !this.props.visible };
         this.foundation = new SideSheetFoundation(this.adapter);
+        this.bodyOverflow = '';
+        this.scrollBarWidth = 0;
+        this.originBodyWidth = '100%';
     }
 
     context: ContextValue;
+    private bodyOverflow: string;
+    private scrollBarWidth: number;
+    private originBodyWidth: string;
 
     get adapter(): SideSheetAdapter {
         return {
             ...super.adapter,
             disabledBodyScroll: () => {
                 const { getPopupContainer } = this.props;
-                if (!getPopupContainer && document) {
+                this.bodyOverflow = document.body.style.overflow || '';
+                if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
                     document.body.style.overflow = 'hidden';
+                    document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
                 }
             },
             enabledBodyScroll: () => {
                 const { getPopupContainer } = this.props;
-                if (!getPopupContainer && document) {
-                    document.body.style.overflow = '';
+                if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+                    document.body.style.overflow = this.bodyOverflow;
+                    document.body.style.width = this.originBodyWidth;
                 }
             },
             notifyCancel: (e: React.MouseEvent | React.KeyboardEvent) => {
@@ -143,7 +152,16 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         return newState;
     }
 
+    static getScrollbarWidth() {
+        if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
+            return window.innerWidth - document.documentElement.clientWidth;
+        }
+        return 0;
+    }
+
     componentDidMount() {
+        this.scrollBarWidth = SideSheet.getScrollbarWidth();
+        this.originBodyWidth = document.body.style.width;
         if (this.props.visible) {
             this.foundation.beforeShow();
         }
@@ -214,7 +232,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
             [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone,
         });
         const contentProps = {
-            ...( isVertical ? (width ? { width } : {}) : { width: "100%" }),
+            ...(isVertical ? (width ? { width } : {}) : { width: "100%" }),
             ...props,
             visible,
             motion: false,

src/styles/content.scss

@@ -112,11 +112,6 @@
 
 .light-scrollbar {
 
-    // light scrollbar
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
 
     &::-webkit-scrollbar-track {
         background: rgba(0, 0, 0, 0);

src/styles/index.scss

@@ -20,10 +20,6 @@ body {
     margin: 0;
     background: var(--semi-color-bg-0);
 
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
 
     &::-webkit-scrollbar-track {
         background: rgba(0, 0, 0, 0);