fix: scroll bar hide effect page width

packages/fluent-editor/src/assets/fullscreen.scss

@@ -1,12 +1,21 @@
 :-webkit-full-screen {  
-    background-color: white !important;  
+  background-color: white !important;  
 }  
 :-moz-full-screen {  
-background-color: white !important;  
+  background-color: white !important;  
 }  
 :-ms-fullscreen {  
-background-color: white !important;  
+  background-color: white !important;  
 }  
 :fullscreen {  
-background-color: white !important;  
-} 
+  background-color: white !important;  
+}
+.scroll {
+  &--lock {
+    overflow: hidden !important;
+  }
+  &__wrap {
+    overflow: auto;
+    height: 100%;
+  }
+}

packages/fluent-editor/src/screenshot/index.ts

@@ -2,6 +2,7 @@ import Quill from 'quill'
 import type Toolbar from 'quill/modules/toolbar'
 import type html2canvas from 'html2canvas'
 import type { Options as Html2CanvasOptions } from 'html2canvas'
+import { lockScroll } from '../utils/scroll-lock'
 
 const Delta = Quill.import('delta')
 
@@ -47,7 +48,6 @@ function init() {
   wrapper.appendChild(mask)
   wrapper.appendChild(cutter)
   document.body.appendChild(wrapper)
-  document.body.style.overflow = 'hidden'
   return { wrapper, mask, cutter, coordinate }
 }
 
@@ -103,18 +103,20 @@ export function Screenshot(this: Toolbar & ScreenShotOptionsInQuill) {
     leftClickLockFlag: false,
     start: undefined,
   }
+  const cleanLock = lockScroll()
 
   const removeContextmenu = (event: Event) => {
     event.preventDefault()
     wrapper.remove()
+    cleanLock()
     document.removeEventListener('contextmenu', removeContextmenu)
   }
   const afterShotCtrl = async (event: MouseEvent) => {
     document.removeEventListener('mousedown', toggleRect)
-    Object.assign(document.body.style, { overflow: null })
     const cutterRect = cutter.getBoundingClientRect()
     const target = event.target as HTMLElement
     wrapper.remove()
+    cleanLock()
     if (target && target.className === 'ql-screenshot-confirm') {
       const image = await renderImage(Html2Canvas, html2CanvasOptions, cutterRect, { beforeCreateCanvas, beforeCreateImage })
 

packages/fluent-editor/src/utils/scroll-lock.ts

@@ -0,0 +1,52 @@
+let scrollBarWidth: number
+export const getScrollBarWidth = ({ target = document.body } = {}): number => {
+  if (scrollBarWidth !== undefined) return scrollBarWidth
+
+  const outer = document.createElement('div')
+  outer.className = 'scroll__wrap'
+  outer.style.visibility = 'hidden'
+  outer.style.width = '100px'
+  outer.style.position = 'absolute'
+  outer.style.top = '-9999px'
+  target.appendChild(outer)
+
+  const widthNoScroll = outer.offsetWidth
+  outer.style.overflow = 'scroll'
+
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  const widthWithScroll = inner.offsetWidth
+  outer.parentNode?.removeChild(outer)
+  scrollBarWidth = widthNoScroll - widthWithScroll
+
+  return scrollBarWidth
+}
+
+export const lockScroll = ({ target = document.body } = {}) => {
+  let scrollBarWidth = 0
+  let originWidth = '0'
+
+  const clockClass = 'scroll--lock'
+
+  const cleanLock = () => {
+    target && (target.style.width = originWidth)
+    target.classList.remove(clockClass)
+  }
+
+  const hasHiddenClass = target.classList.contains(clockClass)
+  if (!hasHiddenClass) {
+    originWidth = target.style.width
+  }
+  scrollBarWidth = getScrollBarWidth({ target })
+  const hasOverflow = (target === document.body ? document.documentElement : target).clientHeight < target.scrollHeight
+  const overflowY = window.getComputedStyle(target).overflowY
+  // only when the scrollbar exists needs to reduce width
+  if (scrollBarWidth > 0 && (hasOverflow || overflowY === 'scroll') && !hasHiddenClass) {
+    target.style.width = `calc(100% - ${scrollBarWidth}px)`
+  }
+  target.classList.add(clockClass)
+
+  return cleanLock
+}